Tab

Tabs organise content across different screens with a simple navigation.

Sketch	Figma	HTML, CSS	Available from
		JS	v4.1.0

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://assets.design.digital.engie.com/fluid/latest/reboot.css">
<link rel="stylesheet" type="text/css" href="https://assets.design.digital.engie.com/fluid/latest/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://assets.design.digital.engie.com/fluid/latest/components/tab/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  Tab.init();
});
</script>

import Tab from '@engie-group/fluid-design-system/lib/components/tab';
document.addEventListener('DOMContentLoaded', function(event) {
  Tab.init();
});

//Initialization via webcomponents
   
import React, { useEffect } from 'react';
import { TabWC } from '@engie-group/fluid-design-system/lib-esm/components/tab';
   
const App = () => {
  ...
  useEffect(() => {
    TabWC.init();
  }, []);
     ...
}
   
export default App;

   <nj-tab>
       <div class="nj-tab"  role="tablist">
          ...
       </div>
   </nj-tab>

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