Back to Slint

TabWidget

docs/astro/src/content/docs/reference/std-widgets/views/tabwidget.mdx

1.17.11.8 KB
Original Source

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro'; import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-tabwidget.png" imageWidth="200" imageHeight="200" imageAlt='std-widgets tabwidget example'> ```slint import { TabWidget } from "std-widgets.slint"; export component Example inherits Window { width: 200px; height: 200px; TabWidget { Tab { title: "First"; Rectangle { background: orange; } } Tab { title: "Second"; Rectangle { background: pink; } } } } ``` </CodeSnippetMD>

TabWidget is a container for a set of tabs. It can only have Tab elements as children and only one tab will be visible at a time.

Properties

current-index

<SlintProperty typeName="int" propName="current-index" default="0"> The index of the currently visible tab.
slint
TabWidget {
    current-index: 1;

    Tab {
        title: "First";
    }
    Tab {
        title: "Second";
    }
}
</SlintProperty>

orientation

<SlintProperty typeName="enum" enumName="Orientation" propName="orientation" defaultValue="horizontal"> The orientation of the tab bar. When set to `vertical`, the tab bar is placed to the left of the content. The property must be constant. For example: ```slint TabWidget { in property <Orientation> foo; // orientation: foo; // error orientation: Orientation.vertical; //valid Tab { title: "First"; } } ``` </SlintProperty>

Properties of the Tab element

title

<SlintProperty typeName="string" propName="title"> The text written on the tab.
slint
TabWidget {
    Tab {
        title: "First";
    }
}
</SlintProperty>