kopia lustrzana https://github.com/shoelace-style/shoelace
130 wiersze
5.2 KiB
Markdown
130 wiersze
5.2 KiB
Markdown
|
# Tab Group
|
||
|
|
|
||
|
|
[component-header:sl-tab-group]
|
||
|
|
|
||
|
|
Tab groups organize content into a container that shows one section at a time.
|
||
|
|
|
||
|
|
Tab groups make use of [tabs](/components/tab.md) and [tab panels](/components/tab-panel.md). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-tab-group>
|
||
|
|
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||
|
|
|
||
|
|
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
|
||
|
|
</sl-tab-group>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### Tabs on Bottom
|
||
|
|
|
||
|
|
Tabs can be shown on the bottom by setting `placement` to `bottom`.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-tab-group placement="bottom">
|
||
|
|
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||
|
|
|
||
|
|
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
|
||
|
|
</sl-tab-group>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Tabs on Left
|
||
|
|
|
||
|
|
Tabs can be shown on the left by setting `placement` to `left`.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-tab-group placement="left">
|
||
|
|
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||
|
|
|
||
|
|
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
|
||
|
|
</sl-tab-group>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Tabs on Right
|
||
|
|
|
||
|
|
Tabs can be shown on the right by setting `placement` to `right`.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-tab-group placement="right">
|
||
|
|
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||
|
|
|
||
|
|
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
|
||
|
|
</sl-tab-group>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Scrolling Tabs
|
||
|
|
|
||
|
|
When there are more tabs than horizontal space allows, the nav will be scrollable.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-tab-group>
|
||
|
|
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
|
||
|
|
<sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
|
||
|
|
|
||
|
|
<sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
|
||
|
|
<sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
|
||
|
|
</sl-tab-group>
|
||
|
|
```
|
||
|
|
|
||
|
|
[component-metadata:sl-tab-group]
|