Tab
Tabs organise content across different screens with a simple navigation.
Example
My Item 1 content
My Item 2 content
My Item 3 content
<div class="nj-tab" role="tablist">
<div class="nj-tab__items">
<button class="nj-tab__item nj-tab__item--active" id="tab-item-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-1">Item 1</button>
<button class="nj-tab__item" id="tab-item-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-content-2" disabled>Item 2</button>
<button class="nj-tab__item" id="tab-item-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-content-3" >Item 3</button>
</div>
<div class="my-3">
<div class="nj-tab__content nj-tab__content--active" id="tab-content-1" aria-labelledby="tab-item-1">My Item 1 content</div>
<div class="nj-tab__content" id="tab-content-2" aria-labelledby="tab-item-2">My Item 2 content</div>
<div class="nj-tab__content" id="tab-content-3" aria-labelledby="tab-item-3">My Item 3 content</div>
</div>
</div>
Usage
Choose between using the global library or initializing component:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/reboot.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/components/tab/index.css">
@import "~@engie-group/fluid-design-system/src/reboot";
@import "~@engie-group/fluid-design-system/src/components/tab";
//Exposed global variable
<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/components/tab/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/auto-init.js"></script>
import { Tab } from '@engie-group/fluid-design-system/lib/components/tab';
import '@engie-group/fluid-design-system/lib/auto-init';
Properties
CSS Classes | Description |
---|---|
nj-tab__item--active |
set nj-tab__item as selected |
nj-tab__content--active |
set nj-tab__content visible |
Tag Attribute | Description |
---|---|
disabled |
Disable tab nj-tab__item |
Design Tokens
CSS4 local variable | light value | dark value |
---|---|---|
--nj-color-line-tab |
–nj-color-base-gray-300 | –nj-color-base-gray-400 |