@sikt/sds-tabs
v3.0.3
Published
## Consume
Downloads
1,335
Readme
@sikt/sds-tabs
Consume
npm i -s @sikt/sds-tabs
React
import { Tabs, TabList, Tab, TabPanel } from "@sikt/sds-tabs";
import "@sikt/sds-tabs/dist/index.css";
<Tabs>
<TabList>
<Tab>First Tab</Tab>
<Tab>Second Tab</Tab>
<Tab>Third Tab</Tab>
</TabList>
<TabPanel>First Content</TabPanel>
<TabPanel>Second Content</TabPanel>
<TabPanel>Third Content</TabPanel>
</Tabs>;
Stylesheets & custom markup
Import stylesheet:
@import url("@sikt/sds-tabs");
Create custom markup:
<div class="sds-tabs">
<div class="sds-tabs__tab-list" role="tablist" aria-label="Sample Tabs">
<button
class="sds-tabs__tab"
role="tab"
aria-selected="true"
aria-controls="panel-guid-1"
id="tab-guid-1"
tabindex="0"
>
First Tab
</button>
</div>
<div
class="sds-tabs__tab-panel"
id="panel-guid-1"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-guid-1"
>
<p>Content for the first panel</p>
</div>
</div>
More about accessibility requirements for the role tabs.