- Exciting release!Introducing "safe npm". Learn more →
@s-ui/react-molecule-tabs
Advanced tools
@s-ui/react-molecule-tabs
> Basic component for tabs allowing versions with or without icons and classic or highlighted variants
- 2.37.0latest
- Version published
- Maintainers
- 1
- Weekly downloads
- 904
- increased by2.38%
Weekly downloads
Readme
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.
FAQs
> Basic component for tabs allowing versions with or without icons and classic or highlighted variants
The npm package @s-ui/react-molecule-tabs receives a total of 730 weekly downloads. As such, @s-ui/react-molecule-tabs popularity was classified as not popular.
We found that @s-ui/react-molecule-tabs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.