(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Panel

You can use it in elements such as cards with dynamic backgrounds. In a weather application, you can bring an image suitable for the location weather condition, or you can use it as an indicator in a list. Because the Row element can be added, they can have complex contents.

Adding Panels

You can add the Panel element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a column, you just add the Panel element.

Since it can take Row element, you can make your screen designs by adding other elements except Header and Footer elements.

Properties

You can add an element directly to the panel element or it can be a part of different elements. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.

SCROLLING

Open the Properties panel Scrolling section. In cases where the height of the panel element is set shorter than the elements in its content, you can enable the content to be scrolled. You can adjust its direction and state with scroll.

SCROLL BACK COLOR / WIDTH / RADIUS

You can make the panel content scrollable when it is longer than the panel width/height. You can edit the style of the scroll bar that will appear on the horizontal/vertical edge of the panel.

DYNAMIC FONT COLOR

Again, in the similar list, the label element in the panel element in the student exam result list.

DYNAMIC BACKGROUND COLOR

The background color of the element can be changed depending on the incoming data via a data table. Imagine that a list of student exam results is prepared. You can add it as a container element to the label element when you want the exam grades below 70 points to be red and the exam grades 70 and above to be green. You can also use the additional features in the symbol picker while adding the relevant function.

DYNAMIC BG IMAGE

In a weather application, you can use the panel element in cases where you want to display an image on the background in accordance with the weather conditions, such as the relevant temperature, wind, or display the attached image in social media applications.

HOVER BACKGROUND COLOR

In web applications, you can set the color change in the background of the cursor when it hovers over the panel element.

HOVER FONT COLOR

In web applications, you can specify the color of the label element inside the cursor when it hovers over the panel element.

AUTHORIZATION

You can use the authorization options for the spacer element.

VISIBILITY

You can manage the visibility of the element. It is always visible, hidden, or you can make it appear or hide depending on a condition.

Styling

You can make additional edits by adding a frame, fill color, border or shadow to the panel element.

LAYOUT

You can make visual adjustments such as environmental interior spaces and sizing. Depending on the panel size, you can align the elements in it.

TEXT

You can set the properties such as the color and size of the panel text and icon with the text section.

FILL

You can add color or image to the panel body.

BORDER

You can add lines to the outer edges of the panel and give curves to the corner.

SHADOW

You can add panel shadows.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try