Tabs

ember install @freshworks/tabs

Tabs are used to organise content under each section. Tabs are most helpful when there is a lot of content to show in a page. Tabs can help in showing content which are under the same level of hierarchy, under each section inside the same page.

Usage

1. Categorisation

It's easy for the user to quickly distinguish which tab belongs to which content.

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    customClasses="sample-tab sample-tab-simple"
    description="site-navigation" 
    select="I want apples" 
    variant="line" as |tabs| }}
  {{#tabs.panel name="I want apples" testId="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" testId="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" testId="I want grapes" }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

2. Custom action 'on' changing tab

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    description="site-navigation" 
    onChange=(action "onChange") as |tabs| }}
  {{#tabs.panel name="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

3. Custom action 'before' changing tab

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    description="site-navigation" 
    select="I want apples" 
    beforeChange=(action "beforeChange") 
    onChange=(action "onChange") as |tabs| }}
  {{#tabs.panel name="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

4. Disabled tab

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    description="site-navigation" 
    variant="line" as |tabs| }}
  {{#tabs.panel name="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" disabled=true }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

Styles

1. Default

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    description="site-navigation" 
    select="I want apples" 
    variant="line" as |tabs| }}
  {{#tabs.panel name="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

2. With Background

Pass 'variant' property as 'background'.

I want apples

I want oranges

I want grapes

This is apples section

{{#nucleus-tabs 
    description="site-navigation" 
    select="I want apples" 
    variant="background" as |tabs| }}
  {{#tabs.panel name="I want apples" }}
    <div>This is apples section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want oranges" }}
    <div>This is oranges section</div>
  {{/tabs.panel}}
  {{#tabs.panel name="I want grapes" }}
    <div>This is grapes section</div>
  {{/tabs.panel}}
{{/nucleus-tabs}}

Guidelines

✅ Do's

Tabs should be placed in a single row over the content
Include all interactive states for the tabs

🚫 Dont's

Dont use tabs for sequential content. Users can navigate to any tab at any time and cannot be expected to do it sequentially.
Dont use tabs for content in different levels of hierarchy.