Tabs

Really, tabs doesn’t exist. They are <notebook>s with <page>s.

<notebook>
    <page name="tab1" string="Tab 1">
        <label string="This is the content of tab 1" />
    </page>
    <page name="tab2" string="Tab 2">
        <label string="This is the content of tab 2" />
    </page>
</notebook>

Tab 1

Tab 2

This is the content of tab 2

Changing the position of the tabs

<notebook position="left">
    <page name="tab1" string="Tab 1">
        <label string="This is the content of tab 1" />
    </page>
    <page name="tab2" string="Tab 2">
        <label string="This is the content of tab 2" />
    </page>
</notebook>

Tab 1

Tab 2

This is the content of tab 2

Supported values for position are top, right, bottom, and left.

Adding icons to the tabs

<notebook>
    <page name="tab1" string="Tab 1" icon="star">
        <label string="This is the content of tab 1" />
    </page>
    <page name="tab2" string="Tab 2" icon="warning">
        <label string="This is the content of tab 2" />
    </page>
</notebook>

Tab 1

Tab 2

This is the content of tab 2

Showing a spinner inside a tab

v2.38.0

Is possible to show a spinner inside a tab while the content is loading.

<notebook>
    <page name="tab1" string="Tab 1" loading="1">
        <label string="This is the content of tab 1" />
    </page>
    <page name="tab2" string="Tab 2">
        <label string="This is the content of tab 2" />
    </page>
</notebook>

Tab 1

Tab 2

Loading...

This is the content of tab 2

Note

You can use attrs to set the attribute of loading depending on a condition. See attrs for more information.

API

Notebook

Property	Description	Type	Default	Version
position	Position of the tabs	top | right | bottom | left	top	-

Page

Property	Description	Type	Default	Version
string	Title of the page	string	-	-
icon	Icon of the page. See Icons.	string	-	-
loading	If the page is loading to show a Spinner	boolean	-	v2.38.0