2023-06-06 12:22:18 +00:00
|
|
|
---
|
|
|
|
|
meta:
|
|
|
|
|
title: Tab Panel
|
|
|
|
|
description: Tab panels are used inside tab groups to display tabbed content.
|
|
|
|
|
layout: component
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
```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>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx:react
|
2023-08-11 17:09:44 +00:00
|
|
|
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
|
|
|
|
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
|
|
|
|
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
2023-06-06 12:22:18 +00:00
|
|
|
|
|
|
|
|
const App = () => (
|
|
|
|
|
<SlTabGroup>
|
|
|
|
|
<SlTab slot="nav" panel="general">
|
|
|
|
|
General
|
|
|
|
|
</SlTab>
|
|
|
|
|
<SlTab slot="nav" panel="custom">
|
|
|
|
|
Custom
|
|
|
|
|
</SlTab>
|
|
|
|
|
<SlTab slot="nav" panel="advanced">
|
|
|
|
|
Advanced
|
|
|
|
|
</SlTab>
|
|
|
|
|
<SlTab slot="nav" panel="disabled" disabled>
|
|
|
|
|
Disabled
|
|
|
|
|
</SlTab>
|
|
|
|
|
|
|
|
|
|
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
|
|
|
|
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
|
|
|
|
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
|
|
|
|
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
|
|
|
|
</SlTabGroup>
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
|
|
|
|
:::
|
