Tabs - Vue

Tabs are used to group content, allowing users to navigate views without.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Vue

AndroidElementsiOSReactVue

Import

Use in entire app

import { Tabs } from '@warp-ds/vue';
app.use(Tabs);

Use in one component and special imports

You can import the component like so:

import { wTabs, wTab, wTabConent } from '@warp-ds/vue';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { wTabs, wTab, wTabConent } from '@warp-ds/vue/tabs';

Syntax

Basic usage

<w-tabs>
  <w-tab name="one" label="Tab 1" />
  <w-tab name="two" label="Tab 2" />
  <w-tab name="three" label="Tab 3" />
</w-tabs>

Tabs with icons

<script setup>
import { ref } from 'vue';
import { iconSvg } from '/icons';

const selectedTab = ref('one');
</script>

<template>
  <w-tabs v-model="selectedTab">
    <w-tab name="one" label="Tab 1">
      <icon-svg />
    </w-tab>
    <w-tab name="two" label="Tab 2">
      <icon-svg />
    </w-tab>
    <w-tab name="three" label="Tab 3">
      <icon-svg />
    </w-tab>
  </w-tabs>
</template>

Tabs with panel content

The following example demonstrates how the Tabs, Tab, and TabPanel components can be used to switch between panels.

<script setup>
import { wTabs, wTab, wTabPanel } from '@warp-ds/vue';
import { ref } from 'vue';

const selectedTab = ref('one');
</script>

<template>
  <w-tabs v-model="selectedTab">
    <w-tab name="one" label="Tab 1" />
    <w-tab name="two" label="Tab 2" />
    <w-tab name="three" label="Tab 3" />
  </w-tabs>
  <div>
    <w-tab-panel v-if="selectedTab === 'one'" name="one">
      First tab content
    </w-tab-panel>
    <w-tab-panel v-if="selectedTab === 'two'" name="two">
      Second tab content
    </w-tab-panel>
    <w-tab-panel v-if="selectedTab === 'three'" name="three">
      Third tab content
    </w-tab-panel>
  </div>
</template>

Props - Tabs

Required props

Name	Type	Default	Description
v-model	string		Name of the active tab (set by the Tab component via the setActive handler)

Props - Tab

Required props

Name	Type	Default	Description
name	string		Tab name identifier. This value will be omitted as the argument to the Tabs setActive handler

Optional Props

Name	Type	Default	Description
label	string		Interchangeable with the label slot for labelling

Slots

Name	Description
default	Default slot - mainly used for icons
label	Label for the tab (renders below default slot)

Props - TabPanel

Required props

Name	Type	Default	Description
name	string		Tab name identifier - This value should be the same as the name prop of the corresponding Tab component.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system