@asphalt-react/content-switcher

ContentSwitcher

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

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 (
    <main>
      <ContentSwitcher>
        <Switch value={0} onAction={clickHandler} active={active === 0}>
          First
        </Switch>
        <Switch value={1} onAction={clickHandler} active={active === 1}>
          Second
        </Switch>
      </ContentSwitcher>
      <div>
        {active === 0 && (<div>First Section</div)}
        {active === 1 && (<div>Second Section</div>)}
      </div>
    </main>
  )
}

export default App

Props

children

Switch components.

type	required	default
node	true	N/A

Switch

Props

children

Switch caption.

type	required	default
node	true	N/A

value

Index of the Switch.

type	required	default
number	true	N/A

active

Adds styles to show the Switch is active.

type	required	default
bool	false	N/A

onAction

Callback to handle Switch selection.

The function accepts 2 arguments:

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

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

type	required	default
func	false	N/A

size

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

type	required	default
enum	false	"m"

icon

Renders icon as caption.

type	required	default
bool	false	false

qualifier

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

qualifierEnd

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

type	required	default
bool	false	false