2.39.0 • Published 2 days ago
@s-ui/react-molecule-tabs v2.39.0
MoleculeTabs
Basic component for tabs allowing versions with or without icons and classic or highlighted variants
Installation
$ npm install @s-ui/react-molecule-tabs --save
Usage
import MoleculeTabs, {
MoleculeTabs as StaticMoleculeTabs,
MoleculeTab,
moleculeTabsTypes,
moleculeTabsVariants
} from '@s-ui/react-molecule-tabs'
Basic usage (Classic & horizontal)
<MoleculeTabs>
<MoleculeTab
numTab="1"
label="Tab 1"
active
>
<ContentTab1 />
</MoleculeTab>
<MoleculeTab numTab="2" label="Tab 2">
<ContentTab2 />
</MoleculeTab>
<MoleculeTab
numTab="3"
label="Tab 3"
disabled
>
<ContentTab3 />
</MoleculeTab>
</MoleculeTabs>
Full width Classic & Horizontal
<MoleculeTabs type={moleculeTabsTypes.FULLWIDTH}>
<MoleculeTab
numTab="1"
label="Tab 1"
active
>
<ContentTab1 />
</MoleculeTab>
<MoleculeTab numTab="2" label="Tab 2">
<ContentTab2 />
</MoleculeTab>
<MoleculeTab
numTab="3"
label="Tab 3"
disabled
>
<ContentTab3 />
</MoleculeTab>
</MoleculeTabs>
Highlighted & Horizontal
<MoleculeTabs variant={moleculeTabsVariants.HIGHLIGHTED}>
<MoleculeTab
numTab="1"
label="Tab 1"
active
>
<ContentTab1 />
</MoleculeTab>
<MoleculeTab numTab="2" label="Tab 2">
<ContentTab2 />
</MoleculeTab>
<MoleculeTab
numTab="3"
label="Tab 3"
disabled
>
<ContentTab3 />
</MoleculeTab>
</MoleculeTabs>
Highlighted & Vertical
<MoleculeTabs variant={moleculeTabsVariants.HIGHLIGHTED} type={moleculeTabsTypes.VERTICAL}>
<MoleculeTab
numTab="1"
label="Tab 1"
active
>
<ContentTab1 />
</MoleculeTab>
<MoleculeTab numTab="2" label="Tab 2">
<ContentTab2 />
</MoleculeTab>
<MoleculeTab
numTab="3"
label="Tab 3"
disabled
>
<ContentTab3 />
</MoleculeTab>
</MoleculeTabs>
with Icons
<MoleculeTabs>
<MoleculeTab
numTab="1"
label="Tab 1"
icon={<IconLineBackup />}
active
>
<ContentTab1 />
</MoleculeTab>
<MoleculeTab numTab="2" label="Tab 2" icon={<IconLineDashboard />}>
<ContentTab2 />
</MoleculeTab>
<MoleculeTab
numTab="3"
label="Tab 3"
icon={<IconLineExtension />}
disabled
>
<ContentTab3 />
</MoleculeTab>
</MoleculeTabs>
Find full description and more examples in the demo page.
2.39.0
2 days ago
2.38.0
4 days ago
2.37.0
2 years ago
2.36.0
2 years ago
2.35.0
2 years ago
2.32.0
2 years ago
2.34.0
2 years ago
2.33.0
2 years ago
2.31.0
2 years ago
2.30.0
2 years ago
2.29.0
2 years ago
2.28.0
2 years ago
2.27.0
3 years ago
2.26.0
3 years ago
2.25.0
3 years ago
2.24.0
3 years ago
2.23.0
3 years ago
2.22.0
3 years ago
2.21.0
3 years ago
2.20.0
3 years ago
2.19.0
3 years ago
2.18.0
3 years ago
2.17.0
4 years ago
2.16.0
4 years ago
2.15.0
4 years ago
2.13.0
4 years ago
2.14.0
4 years ago
2.12.0
4 years ago
2.11.0
4 years ago
2.10.0
4 years ago
2.9.0
4 years ago
2.8.0
4 years ago
2.7.0
4 years ago
2.6.0
4 years ago
2.5.0
4 years ago