diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx index 90595b5a..661fc0ca 100644 --- a/docs/src/pages/components/Tabs.svx +++ b/docs/src/pages/components/Tabs.svx @@ -7,8 +7,12 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"] import Preview from "../../components/Preview.svelte"; +`Tabs` provides a way to organize content into separate views that can be switched between. It supports keyboard navigation, disabled states, and various layout options. + ## Default +Create a basic tab interface with labels and content. + @@ -22,9 +26,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"] ## Auto width -By default, the width of each tab is set to `10rem`. - -Set `autoWidth` to `true` for tabs to have an automatically set width. +By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for tabs to automatically adjust their width based on content. @@ -39,13 +41,13 @@ Set `autoWidth` to `true` for tabs to have an automatically set width. ## Reactive example +Use `bind:selected` to create a two-way binding with the selected tab index. This allows you to programmatically control the selected tab and react to tab changes. + ## Disabled tabs -Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable. - -Using keyboard navigation (left and right arrow keys) will skip to the next non-disabled tab. +Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard navigation will skip disabled tabs. @@ -62,6 +64,8 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- ## Container type +Use the container type for a more prominent tab interface. + @@ -75,8 +79,12 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- ## Skeleton (default) +Show a loading state with the default skeleton variant. + ## Skeleton (container) +Show a loading state with the container skeleton variant. + \ No newline at end of file