Skip to content

Commit 931b45e

Browse files
committed
docs(tabs): add "Container type (full width)" example
1 parent 0713704 commit 931b45e

1 file changed

Lines changed: 16 additions & 1 deletion

File tree

docs/src/pages/components/Tabs.svx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ Use the `icon` prop to render an icon next to the tab label. The icon is rendere
104104

105105
## Container type
106106

107-
Use the container type for a more prominent tab interface.
107+
Use the container type for a more prominent tab interface. By default, container types have an auto-width.
108108

109109
<Tabs type="container">
110110
<Tab label="Tab label 1" />
@@ -117,6 +117,21 @@ Use the container type for a more prominent tab interface.
117117
</svelte:fragment>
118118
</Tabs>
119119

120+
## Container type (full width)
121+
122+
Combine `type="container"` with `fullWidth` for container tabs that evenly span the full width of the container.
123+
124+
<Tabs type="container" fullWidth>
125+
<Tab label="Tab label 1" />
126+
<Tab label="Tab label 2" />
127+
<Tab label="Tab label 3" />
128+
<svelte:fragment slot="content">
129+
<TabContent>Content 1</TabContent>
130+
<TabContent>Content 2</TabContent>
131+
<TabContent>Content 3</TabContent>
132+
</svelte:fragment>
133+
</Tabs>
134+
120135
## Container type (disabled)
121136

122137
Container type tabs with disabled states. Set `disabled` to `true` on individual tabs to prevent interaction.

0 commit comments

Comments
 (0)