Tabs

Organize content into separate pages

Usage

Content of the first tab

<template>
  <winui-tabs :tabs="tabs">
    <template #tab1>
      <p>Content of the first tab</p>
    </template>
    <template #tab2>
      <p>Content of the second tab</p>
    </template>
    <template #tab3>
      <p>Content of the third tab</p>
    </template>
  </winui-tabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: {
        tab1: "First tab",
        tab2: "Second tab",
        tab3: "Third tab",
      },
    };
  },
};
</script>

Props

tabs required

• Type: { [key: string]: string }
• Default: undefined

The tabs to display. The key is the tab id and the value is the tab label. The tab id must match the slot name (e.g <template #tab1> in the above example).

justified optional

• Type: boolean
• Default: false

Whether the tabs should be justified.

@change optional

• Type: (tabId: string) => void
• Default: undefined

The function to call when the active tab changes. The function will be called with the active tab ID as an argument.

Customization

Use the class name .winui-tabs to override/customize the component's styles.

Examples

Justified tabs

Content of the first tab

<template>
  <winui-tabs :tabs="tabs" justified>
    <template #tab1>
      <p>Content of the first tab</p>
    </template>
    <template #tab2>
      <p>Content of the second tab</p>
    </template>
    <template #tab3>
      <p>Content of the third tab</p>
    </template>
    <template #tab4>
      <p>Content of the fourth tab</p>
    </template>
  </winui-tabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: {
        tab1: "First tab",
        tab2: "Second tab",
        tab3: "Third tab",
        tab4: "Fourth tab",
      },
    };
  },
};
</script>

Listen to tab change

Active tab: tab1

Content of the first tab

<template>
  <div>
    <div style="margin-bottom: 12px">
      Active tab: <code>{{ activeTab }}</code>
    </div>
    <winui-tabs :tabs="tabs" @change="handleChange">
      <template #tab1>
        <p>Content of the first tab</p>
      </template>
      <template #tab2>
        <p>Content of the second tab</p>
      </template>
      <template #tab3>
        <p>Content of the third tab</p>
      </template>
      <template #tab4>
        <p>Content of the fourth tab</p>
      </template>
    </winui-tabs>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      activeTab: "tab1",
      tabs: {
        tab1: "First tab",
        tab2: "Second tab",
        tab3: "Third tab",
        tab4: "Fourth tab",
      },
    };
  },
  methods: {
    handleChange(tabId) {
      this.activeTab = tabId;
    },
  },
};
</script>