Platform: Tabs Component Technical Design

Tabs Component

Summary

Tabs organise related content so users can navigate between views within the same page. Tabs consists of list of tab items where user can select the item which they want to view. User will have options to access these items one by one by pressing tab key and he can select particular item by space or enter key.

Tabs enable users to scan a page and easily find what they need. Use tabs to group information into logical sections based on functionality or use case.

Tabs will be used to group related content on the same page. so that user can easily access the information without loading the different web page.

Design

<fdp-tab-list [list]=“tabList” [(selectedIndex)]=“selectedtab()”>

Property Bindings

tabList: TabItem[]

The "tabList" property accepts an array of TabItem, and uses these values to create the tab list.

---

Event Bindings

selectedIndexChange: EventEmitter<number>

The "selectedIndexChange" event binding emits an event with a selected index of the tab, whenever the user clicks or press enter key or space on the particular tab item.

Two-Way Bindings

'selectedIndex' is a two way binding for the tab selection.

---

Content Projection

N/A

---

Interfaces and Types

Tab

export interface Tab {
        title: string;  // specifies the tab title
        label:string;  // specifies label for each tab item
        disabled: boolean; // option for disabling the tab
        active: boolean; // user can able specify the current active tab 
        index: number; // specifies the tab index nnumber
        titleTemplate: ComplexTitle; // title would be a combination image(icon),name,counter.
        tablink: TabLink; //  option to provide the routerLink
        content:string; //  content of the tab.

}

ComplexTitle

export interface ComplexTitle {
    icon: string; // to specify the icon name(optional)
    counter:number; // to specify the counter option for each tab(optional)
}

TabLink

export interface TabLink {
    link: string;   // link for the tab for navigation using [routerLink]
    active: boolean;   // specifies routerLinkActive
}

Comments

@Frank

• What I am missing here how are you going to add a content for the actual tab ? What is you thinking behind it?

• How do you connect actual content with the click tab?
• In general there are several approaches to so that you want to support
  • click on the toptakes you to the new routing page ( in this case u would have to use router-outlet
  • Provide view template for each tab
  • Provide one template and let the tablist ot tell you which tab is clicked so you can render specific view

What is you plan?

• Let's have some uniformity as I commented this on other places for component that accepts list of something let's have binding [list] it will be easier ot work with programaticaly.

• Once you asnwer my first main question this also asnwer these but .

  • Good you have interface to pass in some structure,
  • what is title, label? -> is this the same thing?
  • you dont have to have content as string right ? Tab is container and you be able to have anything, datatable, tree, forms, etc..
  • I dont think we need to complextTitle it became more complex to put together the structure
  • YOu can have simply icon as part of the Tab interface
  • YOu should have also the counter under the Tab But dont call it counter - this is usually called badge

• Are we going to support vertical tabs?
  * Do we need to support ID?
  We can have on the root level routerLink instead of creating extra interface * what you want to have also command?: (event?: any) => void;

• let's just have onChange event

@Kevin

• I agree with Frank that we need to figure out how manage the tab content. This will probably the most challenging part of the component. I'm kind of partial to the way Angular Material handles tabs, but you need to use some advanced Angular to make this work.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      The <em>best</em> pasta
    </ng-template>
    <h1>Best pasta restaurants</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>thumb_down</mat-icon> The worst sushi
    </ng-template>
    <h1>Terrible sushi restaurants</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

• Here's an example of a possible interface based on Angular Material

<fdp-tab-group>
   <fdp-tab [label]="'First Tab'" [icon]="'bell'" [counter]="5">
     <p>This is the content for the first tab.</p>
   </fdp-tab>
   <fdp-tab [label]="'Second Tab'" [icon]="'star'" [active]="true">
     <p>This is the content for the second tab.</p>
   </fdp-tab>
   <fdp-tab [disabled]="true">
     <ng-template fdp-tab-label><em>Third Tab</em> <fd-icon [glyph]="'car'"></fd-icon></ng-template>
     <p>This is the content for the third tab.</p>
   </fdp-tab>
</fdp-tab-group>

• The above designed should be discussed, as I'm not sure if it is compatible with our meta-ui goals.
• Instead of active, I would prefer selected.

@Manu

Q1.

• What I am missing here how are you going to add a content for the actual tab ? What is you thinking behind it?

Ans. In Tab interface i have an attribute called 'content', when the particular tab clicked I am thinking of loading the content to

 <ng-template></ng-template>. 

I thought of loading the content of tab something like this.
```html
 <ng-template>{{content}}</ng-template>

In Fundamental-ngx for Tab is already a component and their component structure looks like below.
```html

<fd-tab-list>
    <fd-tab [title]="'Link'">
        Content Link
    </fd-tab>
    <fd-tab [title]="'Selected'" [disabled]="false">
        Content Selected
    </fd-tab>
    <fd-tab [title]="'Link'" [disabled]="false">
        Content Link Two
    </fd-tab>
    <fd-tab [title]="'Disabled'" [disabled]="true">
        Disabled
    </fd-tab>
</fd-tab-list>



```html
<fd-tab-list>
    <fd-tab>
        <ng-template fd-tab-title>
            <fd-icon [glyph]="'delete'"></fd-icon>
            <span style="margin-left: 12px;">Delete</span>
        </ng-template>
        Content for tab 1
    </fd-tab>
    <fd-tab>
        <ng-template fd-tab-title>
            <fd-icon [glyph]="'edit'"></fd-icon>
            <span style="margin-left: 12px;">Edit</span>
        </ng-template>
        Content for tab 2
    </fd-tab>
    <fd-tab [title]="'Tab 3'">
        <ng-template fd-tab-title>
            <fd-icon [glyph]="'search'"></fd-icon>
            <span style="margin-left: 12px;">Search</span>
        </ng-template>
        Content for tab 3
    </fd-tab>
</fd-tab-list>

I wanted to wrap this structure and make it to single line component like 

<fdp-tab-list [list]=“tabList” [(selectedIndex)]=“selectedtab()”>