Use tabs to allow users to navigate easily between views within the same context.
Color
Set the color of the tab.
| Type | Default Value |
|---|
| string | gray |
<NVTabs Margin=". . 6">
<NVButton IsActive>Button </NVButton>
<NVButton>Button </NVButton>
<NVButton>Button </NVButton>
</NVTabs>
<NVTabs Margin=". . 6" Color="primary">
<NVButton IsActive>Button </NVButton>
<NVButton>Button </NVButton>
<NVButton>Button </NVButton>
</NVTabs>
<NVTabs Color="secondary">
<NVButton IsActive>Button </NVButton>
<NVButton>Button </NVButton>
<NVButton>Button </NVButton>
</NVTabs>
<div class="nv-tabs nv-tabs-level-1 neutral mb-6">
<button class="nv-btn is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<div class="nv-tabs nv-tabs-level-1 primary mb-6">
<button class="nv-btn is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<div class="nv-tabs nv-tabs-level-1 secondary">
<button class="nv-btn is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<nv-tabs mb="6">
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tab
<nv-tabs mb="6" color="primary">
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tab
<nv-tabs mb="6" color="secondary">
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tabs>
<NvTabs mb="6">
<NvButton isActive={true}>tab</NvButton>
<NvButton>tab</NvButton>
<NvButton>tab</NvButton>
</NvTab
<NvTabs color="primary" mb="6">
<NvButton isActive={true}>tab</NvButton>
<NvButton>tab</NvButton>
<NvButton>tab</NvButton>
</NvTab
<NvTabs color="secondary" mb="6">
<NvButton isActive={true}>tab</NvButton>
<NvButton>tab</NvButton>
<NvButton>tab</NvButton>
</NvTabs>
Divider
| Type | Default Value |
|---|
| bool | false |
<NVTabs Divider>
<NVButton IsActive>tab </NVButton>
<NVButton>Panel </NVButton>
<NVButton>Panel </NVButton>
</NVTabs>
<div class="nv-tabs nv-tabs-level-1 tabs-divider neutral">
<button class="nv-btn nv-btn-md nv-btn-level-1 is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<nv-tabs divider>
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tabs>
<NvTabs divider>
<NvButton isActive> tab </NvButton>
<NvButton> tab </NvButton>
<NvButton> tab </NvButton>
</NvTabs>
Flex
Say to the tabs to be flex (share the width of tabs between children).
| Type | Default Value |
|---|
| bool | false |
<NVTabs Flex>
<NVButton IsActive>tab </NVButton>
<NVButton>Panel </NVButton>
<NVButton>Panel </NVButton>
</NVTabs>
<div class="nv-tabs nv-tabs-level-1 neutral tabs-flex">
<button class="nv-btn nv-btn-md nv-btn-level-1 is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<nv-tabs flex>
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tabs>
<NvTabs flex>
<NvButton isActive> tab </NvButton>
<NvButton> tab </NvButton>
<NvButton> tab </NvButton>
</NvTabs>
Level
Set the level of tne tabs.
| Type | Default Value |
|---|
| bool | false |
<NVTabs Level="1" MB="6">
<NVButton IsActive>tab </NVButton>
<NVButton>Panel </NVButton>
<NVButton>Panel </NVButton>
</NVTabs>
<NVTabs Level="2">
<NVButton IsActive>tab </NVButton>
<NVButton>Panel </NVButton>
<NVButton>Panel </NVButton>
</NVTabs>
<div class="nv-tabs nv-tabs-level-1 neutral mb-6">
<button class="nv-btn nv-btn-md nv-btn-level-1 is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<div class="nv-tabs nv-tabs-level-2 neutral">
<button class="nv-btn nv-btn-md nv-btn-level-1 is-active">tab</a>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
<button class="nv-btn nv-btn-md nv-btn-level-1">tab</button>
</div>
<nv-tabs level="1" mb="6">
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tabs>
<nv-tabs level="2">
<nv-button isactive="true">tab</nv-button>
<nv-button>tab</nv-button>
<nv-button>tab</nv-button>
</nv-tabs>
<NvTabs level="1" mb="6">
<NvButton isActive={true}>tab</NvButton>
<NvButton>tab</NvButton>
<NvButton>tab</NvButton>
</NvTabs>
<NvTabs level="2">
<NvButton isActive={true}>tab</NvButton>
<NvButton>tab</NvButton>
<NvButton>tab</NvButton>
</NvTabs>
