shoelace/docs/components/tab-panel.md

42 wiersze
1.5 KiB
Markdown
Czysty Zwykły widok Historia

2020-07-15 21:30:37 +00:00
# Tab Panel
[component-header:sl-tab-panel]
2021-09-11 13:44:47 +00:00
Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
2020-07-15 21:30:37 +00:00
```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>
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
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>
);
```
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-panel]