Tabs component for the NICE Design System, based on the W3C WAI-ARIA Authoring Practices 1.1.
-
@nice-digital/nds-tabs
- Installation - Usage - React - Props - SCSS - HTML
Install Node, and then:
npm i @nice-digital/nds-tabs --save
Import the Tabs
and Tab
components from the package and use within JSX:
import React from "react";
import { Tabs, Tab } from "@nice-digital/nds-tabs";
<Tabs>
<Tab title="Tab one">
<p>Tab one content here</p>
</Tab>
<Tab title="Tab two">
<p>Tab one content here</p>
</Tab>
</Tabs>;
Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
- Type:
React.node
The Tabs
component will only accept children of type Tab
. Any other supplied children will be discarded.
<Tabs>
<Tab></Tab>
<Tab></Tab>
</Tabs>
- Type:
function
- Returns: string
A callback function that will be called when a tab is changed. Passes back a slugified version of the active tab's title.
- Type:
string
Any additional className value that should be merged with the container.
The Tabs
component will spread any props across the tab panel's containing div
element.
- Type:
React.node
Children supplied to the Tab
component will be displayed as the content of the tab panel.
- Type:
string
(required)
The title of the tab button.
<Tabs>
<Tab title="My first tab">
<h1>First Tab</h1>
<p>...</p>
</Tab>
<Tab title="My second tab">
<h2>First Tab</h2>
<p>...</p>
</Tab>
</Tabs>
- Type:
string
Use a custom ID attribute for tab button. If no ID is supplied, the title will be slugified to generate an ID.
<Tabs>
<Tab title="My first tab" id="tab1">
<h1>First Tab</h1>
<p>...</p>
</Tab>
<Tab title="My second tab" id="tab2">
<h2>First Tab</h2>
<p>...</p>
</Tab>
</Tabs>
Any other props will be cascaded to the tab panel, not the button.
If you're not using React, then import the SCSS directly into your application by:
@forward '@nice-digital/nds-tabs/scss/tabs';
If you're not using React, then include the SCSS as above and use the HTML as below. Tab controls and panels, along with their respective ARIA roles and states will be applied by the plugin.
<div data-tabs>
<div>
<h3>Tab 1 Title</h3>
<p>Tab 1 panel</p>
</div>
<div>
<h3>Tab 2 Title</h3>
<p>Tab 2 panel</p>
</div>
<div>
<h3>Tab 3 Title</h3>
<p>Tab 3 panel</p>
</div>
</div>
TODO: JavaScript jQuery plugin