3.0.0 • Published 3 years ago
@arterial/tabs v3.0.0
Arterial Tabs
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. |
3.0.0
3 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
1.0.3
4 years ago
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
1.0.0-alpha.1
4 years ago
1.0.0-alpha.0
4 years ago