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

You can display the contents of the selected tab in multiple fields, such as the Collapse element, in a single frame. Tab titles can be above/right/below/left of the element. It can be prepared in complex interfaces by adding Row element to TabItem fields.

Adding Tabs

You can add the Tab 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. When dragged into a Row, they are added to the current column.

This element of the container type is added to a row as in other elements. However, you can also use it by adding other container elements to it. You can prepare tabs with complex content, starting with the Row element that you will add to the TabItem.


You can edit the properties and styling properties of the tab element itself and for each tab separately. When you select the tab element;


You can add new tabs and remove existing ones. Tab contents that you remove are also deleted along with the tab. You can also change the order.


You can use predefined view types for tab titles.


You can specify which side of the tab element frame the tabs should rest on. You can choose one of the top/right/bottom/left directions.


This is the area where you edit the font and line colors of the selected tab.

TabItem - LabelThis is the section where you add the text you want to be in the selected tab title. While the tab element is selected, select the tab whose title you want to change from the properties panel and change its text.


You can use the authorization options for the tab element.


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.


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


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.


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


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


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