ContentSwitcher

!npm

Component to switch between alternate views of a content within the same page or screen. Only one view is visible at a time. For instance, use ContentSwticher to switch between tabular view and graphical view of a dataset. It's a controlled component where you control which content view should be visible.

ContentSwitcher exports another component named Switch. Switch creates the tabs for each view. Switches come in 2 sizes: small and medium (default). Each Switch has three types of caption:

* text only
* text with an icon; icon adds more context to the text
* icon only

Switch accepts most of the button element's attributes such as id & name and supports data-\* attributes.

Accessibility

1. ContentSwitcher has a role="tablist" and the Switches have role="tab".
2. The selected Switch has "aria-selected" set to true.
3. The Switches are focusable using tab.
4. ContentSwitcher accepts aria-\* attributes for role="tablist".
5. Switch accepts aria-\* attributes for role="tab".

Accessibility must-haves

1. Add role="tabpanel" to the content section.
2. Add an id to a Switch. Pass the "id"'s value to aria-labelledby attribute to the element of the content section.
3. Add an id to the view section element. Pass the "id"'s value to aria-controls attribute of its Switch.
4. Add aria-label or aria-labelledby in Switch with icon as caption.

Check examples to see these in action.

Usage

``jsx
import React, { useState } from "react"
import { ContentSwitcher, Switch } from "@asphalt-react/content-switcher"

function App() {
const [active, setActive] = useState(0)
const clickHandler = (value) => setActive(value)
return (


export default App
`

[comment]: # "ContentSwitcher Props"

Props

$3

Switch components.

| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |

Switch

[comment]: # "Switch Props"

Props

$3

Switch caption.

| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |

$3

Index of the Switch.

| type | required | default |
| ------ | -------- | ------- |
| number | true | N/A |

$3

Adds styles to show the Switch is active.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | N/A |

$3

Callback to handle Switch selection.

The function accepts 2 arguments:

* value: value prop of the Switch.
* options: object containing the React synthetic event.

`js
onAction(value, { event }) {
console.log(value)
}
`

| type | required | default |
| ---- | -------- | ------- |
| func | false | N/A |

$3

Size of the Switches. Accepts one of "s" or "m" for small & medium.

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Renders icon as caption.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icons to add more context to the textual caption.

Accepts SVG or SVG wrapped React component. Checkout @asphalt-react/iconpack for SVG wrapped React components.

> ⚠️ Do not use qualifier to render a Switch with icon as caption; use icon` prop instead.

| type | required | default |
| ------- | -------- | ------- |
| element | false | N/A |

$3

Appends qualifier to the text in caption. Switch prepends the qualifier by default.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Applies accent intent when Switch is active.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |