Tabs

Tabs organize content across different screens, data sets, and other interactions.

Usage

The ci-tabs component uses dynamic slots to render the tabs and the tab content. First, create a CiTabElement[] called tabs with the object { title: 'Title', pxClass: 'This,Is,PX'} you want for each tab. pxClass is not required. Then use slots for the content of each tab. The slot name with be tab- plus the corresponding tabs item title in kebab-case.

<template>
  <ci-tabs :tabs="tabs">
    <template #tab-lorem-ipsum>
      Lorem Ipsum tab content
    </template>
    <template #tab-dolor>
      Dolor tab content
    </template>
    <template #tab-sit-amet>
      Sit Amet tab content
    </template>
  </ci-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Initial Tab

Use the initial-tab prop to define which tab is active initially. It's value should match one of the object title in tabs.

<template>
  <ci-tabs 
    :tabs="tabs" 
    initial-tab="Sit Amet"
  >
    <template #tab-lorem-ipsum>
      Lorem Ipsum tab content
    </template>
    <template #tab-dolor>
      Dolor tab content
    </template>
    <template #tab-sit-amet>
      Sit Amet tab content
    </template>
  </ci-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum', pxClass: 'General,TestCustomPxClass,Tab' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Variants

Use the variant prop to change the appearance of your tabs.

<template>
  <DemoGrid layout="vertical" align="left">
    <ci-tabs :tabs="tabs" variant="normal" align="left">
      <template #tab-lorem-ipsum>
        Lorem Ipsum tab content
      </template>
      <template #tab-dolor>
        Dolor tab content
      </template>
      <template #tab-sit-amet>
        Sit Amet tab content
      </template>
    </ci-tabs>
    <ci-tabs :tabs="tabs" variant="compact" align="left">
      <template #tab-lorem-ipsum>
        Lorem Ipsum tab content
      </template>
      <template #tab-dolor>
        Dolor tab content
      </template>
      <template #tab-sit-amet>
        Sit Amet tab content
      </template>
    </ci-tabs>
    <ci-tabs :tabs="tabs" variant="subcompact" align="left">
      <template #tab-lorem-ipsum>
        Lorem Ipsum tab content
      </template>
      <template #tab-dolor>
        Dolor tab content
      </template>
      <template #tab-sit-amet>
        Sit Amet tab content
      </template>
    </ci-tabs>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Alignment

Use the align prop to change the alignment of your tabs.

<template>
  <div>
    <ci-tabs :tabs="tabs" align="auto" />
    <ci-tabs :tabs="tabs" align="left" />
    <ci-tabs :tabs="tabs" align="center" />
    <ci-tabs :tabs="tabs" align="right" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Title slot

You can use title slots if you want more than a String for your tabs title. The slot name will be title- plus the corresponding tabs object title in kebab case.

<template>
  <ci-tabs :tabs="tabs">
    <template #title-lorem-ipsum>
      Custom title
      <ci-tooltip text="Some awesome tooltip!" />
    </template>
    <template #tab-lorem-ipsum>
      Lorem Ipsum tab content
    </template>
    <template #tab-dolor>
      Dolor tab content
    </template>
    <template #tab-sit-amet>
      Sit Amet tab content
    </template>
  </ci-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Action slot

You can use actions slot if you want to add icons or other actions to tabs. Works best with compact or subcompact, left aligned tabs.

<template>
  <ci-tabs :tabs="tabs" variant="subcompact" align="left">
    <template #actions>
      <ci-icon icon="magnifying-glass" />
      <ci-icon icon="funnel" />
    </template>
  </ci-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Flush Tabs

Use the flush prop to remove the bottom margin separating the tab controls from the tab content. This can be useful if your tab content needs custom padding.

<template>
  <ci-tabs :tabs="tabs" flush>
    <template #tab-lorem-ipsum>
      Lorem Ipsum tab content
    </template>
    <template #tab-dolor>
      Dolor tab content
    </template>
    <template #tab-sit-amet>
      Sit Amet tab content
    </template>
  </ci-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Events

The ci-tabs component emits a @change whenever the active tab changes.

<template>
  <div>
    <ci-tabs :tabs="tabs" @change="changes += 1" />
    Tabs have changed {{ changes }} time(s)!
  </div>
</template>
<script>
export default {
  data() {
    return {
      changes: 0,
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    };
  },
};
</script>

Reactivity

The tabs will reactively respond to changes to initial-tab, tabs or slot content.

<template>
  <div>
    <ci-button
      :disabled="newTabAdded"
      @click="addNewTab"
    >
      Add "New Tab"
    </ci-button>
    <ci-button
      :disabled="firstTabActive"
      @click="goToPrevTab"
    >
      Prev
    </ci-button>
    <ci-button
      :disabled="lastTabActive"
      @click="goToNextTab"
    >
      Next
    </ci-button>

    <br><br>
    <ci-input v-model="firstTabContent" sublabel="First Tab Content" />
    <br><br>

    {{ currentTabIndex }}
    {{ this.tabs.length - 1 }}

    <ci-tabs :tabs="tabs" :initial-tab="activeTab">
      <template #tab-lorem-ipsum>
        {{ firstTabContent }}
      </template>
      <template #tab-dolor>
        Dolor tab content
      </template>
      <template #tab-sit-amet>
        Sit Amet tab content
      </template>
      <template v-if="newTabAdded" #tab-new-tab>
        Behold: a new tab!
      </template>
    </ci-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 'Lorem Ipsum',
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ],
      firstTabContent: 'Lorem Ipsum tab content',
    }
  },
  computed: {
    currentTabIndex() {
      return this.tabs.map(u => u.title).indexOf(this.activeTab);
    },
    firstTabActive() {
      return this.currentTabIndex === 0;
    },
    lastTabActive() {
      return this.currentTabIndex === this.tabs.length - 1;
    },
    newTabAdded() {
      return this.tabs.find(u => u.title === 'New Tab') !== undefined;
    },
  },
  methods: {
    addNewTab() {
      this.tabs.push({ title: 'New Tab' });
    },
    goToPrevTab() {
      this.activeTab = this.tabs[this.currentTabIndex - 1].title;
    },
    goToNextTab() {
      this.activeTab = this.tabs[this.currentTabIndex + 1].title;
    },
  }
}
</script>