2020-07-15 21:30:37 +00:00
|
|
|
# Tab
|
|
|
|
|
|
|
|
|
|
[component-header:sl-tab]
|
|
|
|
|
|
2021-09-11 13:44:47 +00:00
|
|
|
Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```html preview
|
|
|
|
|
<sl-tab>Tab</sl-tab>
|
|
|
|
|
<sl-tab active>Active</sl-tab>
|
2020-11-02 13:32:54 +00:00
|
|
|
<sl-tab closable>Closable</sl-tab>
|
2020-07-15 21:30:37 +00:00
|
|
|
<sl-tab disabled>Disabled</sl-tab>
|
|
|
|
|
```
|
|
|
|
|
|
2021-11-04 22:12:47 +00:00
|
|
|
```jsx react
|
|
|
|
|
import { SlTab } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
|
|
|
|
|
|
const App = () => (
|
|
|
|
|
<>
|
|
|
|
|
<SlTab>Tab</SlTab>
|
|
|
|
|
<SlTab active>Active</SlTab>
|
|
|
|
|
<SlTab closable>Closable</SlTab>
|
|
|
|
|
<SlTab disabled>Disabled</SlTab>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
2021-05-13 13:11:24 +00:00
|
|
|
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
[component-metadata:sl-tab]
|
