(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

In the alignment commands given for rows or columns that are parent elements, the child elements under them are affected. You can visit the Layout page to adjust the visual arrangements such as environmental interior spaces and sizing.

TEXT

You can adjust the text of the element and the properties such as color and size of the icon with the text section. You can visit the Text page for detailed information.

FILL

For detailed information on filling their bodies with color or adding a background image, you can visit the Fill page.

BORDER

Visit the Border page to add lines to the outer edges and bevel the corners.

SHADOW

The shadow effect is only displayed in web apps. You can visit the Shadow page to add a shadow effect to the row and its columns.

Simplicity Meets High Performance

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