Properties
| Property | Type | Description |
|---|---|---|
selected_key | string or number | (optional) In case one of the tabs should be opened by a key. |
align | left or center or right | (optional) To align the tab list on the right side align="right". Defaults to left. |
content_style | divider or white or transparent | (optional) To enable the visual helper .dnb-section on to the content wrapper. Use a supported modifier from the Section component. Defaults to null. |
content_spacing | boolean or x-small or small or medium or large or x-large or xx-large | (optional) To modify the spacing onto the content wrapper. Use a supported modifier from the Section component. Defaults to large. |
tabs_style | divider or white or transparent | (optional) To enable the visual helper .dnb-section inside the tabs list. Use a supported modifier from the Section component. Defaults to null. |
tabs_spacing | boolean | (optional) To modify the spacing inside the tab list. Defaults to null. |
tab_element | React.ReactNode | (optional) Define what HTML element should be used. You can provide e.g. tab_element={GatsbyLink} – you may then provide the to property inside every entry (data={[{ to: ';url';, ... }]}). Defaults to <button>. |
data | stting or {title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean} | (required) defines the data structure to load as a JSON. e.g. [{title: '...', content: 'Current tab', key: '...', hash: '...'}] |
children | React.ReactNode or object | (required) the content to render. Can be a function, returning the current tab content (key) => ('Current tab'), a React Component or an object with the keys and content {key1: 'Current tab'}. |
content | React.ReactNode or object | (required) the content to render. Can be a function, returning the current tab content (key) => ('Current tab'), a React Component or an object with the keys and content {key1: 'Current tab'}. |
prerender | boolean | (optional) If set to true, the Tabs content will pre-render all contents. The visibility will be handled by using the hidden and aria-hidden HTML attributes. Defaults to false. |
prevent_rerender | boolean | (optional) If set to true, the Tabs content will stay in the DOM. The visibility will be handled by using the hidden and aria-hidden HTML attributes. Similar to prerender, but in contrast, the content will render once the user is activating a tab. Defaults to false. |
scroll | boolean | (optional) If set to true, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to false. |
no_border | boolean | (optional) If set to true, the default horizontal border line under the tablist will be removed. Defaults to false. |
nav_button_edge | boolean | (optional) If set to true, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to false. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
breakout | boolean | (optional) If set to false, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to true. |
Space | string or object | (optional) Spacing properties like top or bottom are supported. |
Key
The key can be a string or a number. But if the key is a number (integer), we have to deliver the content directly in the tab item:
const tabsDataWithContent = [{ title: 'First', key: 1, content: <H2>First</H2> },{ title: 'Second', key: 2, content: () => <H2>Second</H2> },]
Example Data
const tabsData = [{ title: 'First', key: 'first' },{ title: 'Second', key: 'second' },{ title: 'Third', key: 'third', disabled: true },{ title: 'Fourth', key: 'fourth' },]
Current tab
The current Tab content can be a string, a function returning content or a React component.