Arterial Tabs

Another React Material Tab

Installation

npm install @arterial/tabs

Usage

Styles

Sass

@use "@material/tab-bar/index.scss" as tab-bar;
@use "@material/tab-indicator/index.scss" as tab-indicator;
@use "@material/tab-scroller/index.scss" as tab-scroller;
@use "@material/tab/index.scss" as tab;
@include tab-bar.core-styles;
@include tab-indicator.core-styles;
@include tab-scroller.core-styles;
@include tab.core-styles;

CSS

import '@material/tab-bar/dist/mdc.tab-bar.css';
import '@material/tab-indicator/dist/mdc.tab-indicator.css';
import '@material/tab-scroller/dist/mdc.tab-scroller.css';
import '@material/tab/dist/mdc.tab.css';

JSX

import {Tab, TabBar} from '@arterial/tabs';

Regular Tabs

function Regular() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="home" label="Home" />
      <Tab id="merchandise" label="Merchandise" />
      <Tab id="about-us" label="About Us" />
    </TabBar>
  );
}

Other Variants

Min Width

function MinWidth() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="home" label="Home" minWidth />
      <Tab id="merchandise" label="Merchandise" minWidth />
      <Tab id="about-us" label="About Us" minWidth />
    </TabBar>
  );
}

Icon

function Icon() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" icon="watch_later" />
      <Tab id="nearby" label="Nearby" icon="near_me" />
      <Tab id="favorites" label="Favorites" icon="favorite" />
    </TabBar>
  );
}

Stacked

function Stacked() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" icon="watch_later" stacked />
      <Tab id="nearby" label="Nearby" icon="near_me" stacked />
      <Tab id="favorites" label="Favorites" icon="favorite" stacked />
    </TabBar>
  );
}

Stacked and Restricted

function StackedRestricted() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" icon="watch_later" restricted stacked />
      <Tab id="nearby" label="Nearby" icon="near_me" restricted stacked />
      <Tab
        id="favorites"
        label="Favorites"
        icon="favorite"
        restricted
        stacked
      />
    </TabBar>
  );
}

Stacked and Restricted

function StackedRestricted() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" icon="watch_later" restricted stacked />
      <Tab id="nearby" label="Nearby" icon="near_me" restricted stacked />
      <Tab
        id="favorites"
        label="Favorites"
        icon="favorite"
        restricted
        stacked
      />
    </TabBar>
  );
}

Indicator Fade

function IndicatorFade() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" indicatorFade />
      <Tab id="nearby" label="Nearby" indicatorFade />
      <Tab id="favorites" label="Favorites" indicatorFade />
    </TabBar>
  );
}

Indicator Icon

function IndicatorIcon() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
    >
      <Tab id="recents" label="Recents" indicatorIcon="star" />
      <Tab id="nearby" label="Nearby" indicatorIcon="star" />
      <Tab id="favorites" label="Favorites" indicatorIcon="star" />
    </TabBar>
  );
}

Scrolling

function getTabs() {
  const tabs = [];
  for (let i = 0; i < 36; i++) {
    tabs.push(`Tab ${i + 1}`);
  }
  return tabs;
}
function Scrolling() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <TabBar
      activeIndex={activeIndex}
      handleActiveIndexUpdate={index => setActiveIndex(index)}
      scroll
    >
      {getTabs().map(label => (
        <Tab id={label} key={label} label={label} />
      ))}
    </TabBar>
  );
}

Props

Tab

Name	Type	Description
active	boolean	Indicates whether the element is active.
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
focused	boolean	Indicates whether the element is focused.
id	string	Id of the element.
indicatorFade	boolean	Enables indicator element fade animation.
indicatorIcon	boolean	Icon to render within as indicator element.
indicatorId	boolean	ID of indicator element.
label	string	Text to be displayed within the root element.
minWidth	boolean	Enables a min width variant.
previousIndicatorClientRect	object	Conains previous indicator element's client rect.
restricted	boolean	Enables a restricted variant.
ripple	boolean	Enables ripple within root element. Defaults to true.
stacked	boolean	Enables a stacked variant.
tag	string | object	HTML tag to be applied to the root element. Defaults to button.

TabBar

Name	Type	Description
activeIndex	boolean	Indicates the tab at that index is active.
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
dir	ltr | rtl	Indicates the directionality of the element's text. Defaults to auto.
handleActiveIndexUpdate	function	Active index update event handler.
onKeyDown	function	Keydown event handler.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.