@asphalt-react/content-switcher v2.1.0

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.

Switch

Props

children

Switch caption.

value

Index of the Switch.

active

Adds styles to show the Switch is active.

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)
}

size

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

icon

Renders icon as caption.

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.

qualifierEnd

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