TabView

Type: CustomComponent

Overrides the default TabView's style. Works without requiring you to write any code. Please follow the guide below to learn how to use it.

Demo Scene - Horizontal Example

Demo Scene - Vertical Example

TabView settings in UI Builder

Usage

1 - Drag and drop TabView to your Hierarchy.

2 - Drag and drop default Tab to the TabView

3 - Configure Tab and add content inside it

Select the Tab component and add name and icon to it.

Add elements inside the Tab component, this is your tab content.

set Tab laben and icon image

Add any VisualElement to Tab and build your content

4 - Save to see the results

TabView doesn't update automatically at the moment, save to see the results.

Styling

<!-- Vertical and yellow instead of horizontal and primary -->
<engine:TabView class="tab-view-vertical yellow">
<!-- Change header color to purple -->
<engine:TabView class="header-purple">
<!-- Change unselected tabs color to red-->
<engine:TabView class="inactive-red">

TabView Layout: Tabview can be horizontal or vertical. Horizontal is the default. Use tab-view-vertical class to change it.

Active Tab Color: To change current tab's color, simply give TabView a color class. For example, yellow. See Colors.

Inactive Tab Color: To change inactive tabs colors, give TabView a class like inactive-{color}. Use any of the default Colors in place of {color}. For example, inactive-lime.

Header Color: To change the header color, give Tabview a class like header-{color}. Use any of the default Colors in place of {color}. For example, header-sky.

Everything else, like TabView size, border, background color etc. can be styled as usual.

Inside the Tab element, you can insert any component and style them as usual.