WtTabs

Props

Name	Type	Default	Description
current	Object	{}	The value of the selected tab
tabs	Array	[]	The list of tabs. Tracked by value property

Events

Name	Params	Description
change	tab: Object	Returns tab object from list of tabs

Slots

Name	Scope	Description
:tab-value	{ tab, current }	Override tab contents with passed tab from tabs object and current tab

Example Tabs

Code

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

const tabs = [
  {
    text: 'Tab 1',
    value: '1',
  },
  {
    text: 'Tab 2',
    value: '2',
  },
  {
    text: 'Tab 3',
    value: '3',
  },
];

const current = ref(tabs[0]);
</script>

<template>
  <wt-tabs
    :current="current"
    :tabs="tabs"
    @change="current = $event"
  />
</template>

<style scoped lang="scss"></style>

Example Wide Tabs

Code

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

const tabs = [
  {
    text: 'Tab 1',
    value: '1',
  },
  {
    text: 'Tab 2',
    value: '2',
  },
  {
    text: 'Tab 3',
    value: '3',
  },
];

const current = ref(tabs[0]);
</script>

<template>
  <wt-tabs
    :current="current"
    :tabs="tabs"
    wide
    @change="current = $event"
  />
</template>

<style scoped lang="scss"></style>