Content switcher
!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.
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".
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.
``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 (
First
Second
{active === 0 && (First Section {active === 1 && (Second Section)}
)
}
export default App
`
[comment]: # "ContentSwitcher Props"
Switch components.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
[comment]: # "Switch Props"
Switch caption.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Index of the Switch.
| type | required | default |
| ------ | -------- | ------- |
| number | true | N/A |
Adds styles to show the Switch is active.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | N/A |
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 |
Size of the Switches. Accepts one of "s" or "m" for small & medium.
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
Renders icon as caption.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
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 |
Appends qualifier to the text in caption. Switch prepends the qualifier by default.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies accent intent when Switch is active.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |