webawesome/docs/pages/components/tab-panel.md at 31ef2f79296a459b716fd5ebb5778cf766b34db0

mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00

Files

Konnor Rogers 31ef2f7929 remove side-effects key, update React docs for cherry-picking (#1485 )

* remove side-effects, update React docs for cherry-picking

* prettier

* add PR #

* prettier

* fix react import paths

* Update docs/pages/frameworks/react.md

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* add colons to imports

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

2023-08-07 13:20:34 -04:00

1.6 KiB

Raw Blame History

meta, layout

meta

layout

title	description
Tab Panel	Tab panels are used inside tab groups to display tabbed content.

component

<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>

import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';

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. :::

1.6 KiB Raw Blame History

1.6 KiB

Raw Blame History