inno-tab

Preview

light background, layout stretchedHigh emphasis itemDevice overviewDevice detailsLabel with icon

light background, layout autoTab label 1Tab label 2Tab label 3Tab label 4Tab label 5Tab label 6Tab label 7Tab label 8Tab label 9Tab label 10Tab label 11Tab label 12Tab label 13Tab label 14Tab label 15

dark background, layout stretchedHigh emphasis itemDevice overviewDevice details

dark background, layout autoTab label 1Tab label 2Tab label 3Tab label 4Tab label 5Tab label 6Tab label 7Tab label 8Tab label 9Tab label 10Tab label 11Tab label 12Tab label 13Tab label 14Tab label 15

Angular

  <inno-tab [layout]="layout" [theme]="theme" [selected]="selectedTabIndex" (selectedChange)="handleTabChange($event.detail)">
    <inno-tab-item>Tab item 1</inno-tab-item>
    <inno-tab-item>Tab item 2</inno-tab-item>
    <inno-tab-item>Tab item 3</inno-tab-item>
    <inno-tab-item>
      <span>Label with icon</span>
      <inno-icon icon="help" size="32"></inno-icon>
    </inno-tab-item>
  </inno-tab>

  <!-- Tab content container -->
  <div *ngIf="activeTabIndex === 0">Tab 1 active</div>
  <div *ngIf="activeTabIndex === 1">Tab 2 active</div>
  <div *ngIf="activeTabIndex === 2">Tab 3 active</div>

  class Component {
    selectedTabIndex: number = 1;

    handleTabChange(index: number) {
      this.activeTabIndex = index;
    }
  }

React

  import {InnoTab, InnoTabItem} from '@innomotics/brand-experience-react-lib';
  import { useState } from 'react';

  export default () => {
    const [selectedTab, setSelectedTab] = useState(0);

    const changeTab = (tabId: number) => setSelectedTab(tabId);

    return (
      <div>
        <InnoTab selected={selectedTab} onSelectedChange={event => changeTab(event.detail)}>
          <InnoTabItem>Tab 1</InnoTabItem>
          <InnoTabItem>Tab 2</InnoTabItem>
          <InnoTabItem>Tab 3</InnoTabItem>
          <InnoTabItem>
            <span>Label with icon</span>
            <InnoIcon icon="help" size="32"></InnoIcon>
          </InnoTabItem>
        </InnoTab>
        {selectedTab === 0 ? <div>Content 1</div> : null}
        {selectedTab === 1 ? <div>Content 2</div> : null}
        {selectedTab === 2 ? <div>Content 3</div> : null}
      </div>
    );
  };

Vue

  <script setup lang="ts">
    import { InnoTab, InnoTabItem } from '@innomotics/brand-experience-vue-lib';
    import { ref } from 'vue';

    const selectedTab = ref(0);
    const changeTab = (tabId: number) => (selectedTab.value = tabId);
  </script>

  <template>
    <div>
      <InnoTab :selected="selectedTab">
        <InnoTabItem @click="changeTab(0)">Tab 1</InnoTabItem>
        <InnoTabItem @click="changeTab(1)">Tab 2</InnoTabItem>
        <InnoTabItem @click="changeTab(2)">Tab 3</InnoTabItem>
      </InnoTab>
      <div v-show="selectedTab === 0">Content 1</div>
      <div v-show="selectedTab === 1">Content 2</div>
      <div v-show="selectedTab === 2">Content 3</div>
    </div>
  </template>

Properties

Property	Attribute	Description	Type	Default
alwaysEmphasized	always-emphasized	Make the non-selected items always vivid without any opacity effect.	boolean	false
layout	layout	Set layout width style	"auto" | "stretched"	'auto'
minimalDecorator	minimal-decorator	Minimalize the bottom decorator for the tab items. Show only if the given item is interracted or selected.	boolean	false
selected	selected	Set default selected tab by index or undefined if not tab is selected.	number	undefined
showArrow	show-arrow	Show the navigation arrow for desktop.	boolean	true
theme	theme	Theme variant of the component.	"dark" | "light"	'light'

Events

Event	Description	Type
selectedChange	selected property changed	CustomEvent<number>

Methods

changeSelected(newIndex: number) => Promise<void>

Programatically change the selected tab by its index and scroll to the selected inno-tab-item inside the inno-tab. Please note that manually changing the 'selected' property won't do any scrolling, that is only possible with this method.

Parameters

Name	Type	Description
newIndex	number

Returns

Type: Promise<void>

Dependencies

Depends on

• inno-icon

Graph

---

Built with StencilJS