Win7 UI

# 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.

# 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>

← Textbox →