Content Switcher

Overview

The Content Switcher component in UiKit provides a user-friendly way to toggle between different content views by selecting tabs. It supports both full-width and flexible sizing options and emits events when tabs are clicked.

Basic

To add the Content Switcher component, start by importing it into your Vue file:

import VContentSwitcher from 'UiKit/components/VContentSwitcher/VContentSwitcher.vue';

Example

Place the component in your template like this:

<VContentSwitcher
    :tabs="tabs"
    v-model="selectedTab"
    :fullWidth="true"
>
    <template #tab="{ tab }">
        <span>{{ tab.label }}</span>
    </template>
</VContentSwitcher>

• tabs: An array of tab objects used for rendering the switcher.
• modelValue: The currently active tab value (optional).
• fullWidth: A boolean to determine if the tabs should take full width (optional).

Tab Structure

interface Tab {
    label: string; // The text displayed for the tab.
    value: string | number; // The unique value for the tab.
}

Example with Tabs

const tabs = [
    { label: 'Tab 1', value: 'tab1' },
    { label: 'Tab 2', value: 'tab2' },
    { label: 'Tab 3', value: 'tab3' },
];

Props

defineProps({
  tabs: {
    type: Array as PropType<Tab[]>,
    required: true,
  },
  modelValue: {
    type: [String, Number],
    default: undefined,
  },
  fullWidth: {
    type: Boolean,
    default: false,
  },
});

• tabs: An array of tab objects that define the tabs in the switcher (required).
• modelValue: (Optional) The currently active tab's value, which can be either a string or a number.
• fullWidth: (Optional) If true, each tab will take an equal share of the available width.

Events

The component emits the following events:

defineEmits<{
  (e: 'update:modelValue', value: Tab['value']): void;
  (e: 'itemClick', value: Tab): void;
}>();

• update:modelValue: Emitted when the active tab changes. Passes the new tab's value.
• itemClick: Emitted when a tab is clicked. Passes the clicked tab object.

Complete Example

Here’s a complete example including the Content Switcher setup with tab definitions:

<script setup lang="ts">
import VContentSwitcher from 'UiKit/components/VContentSwitcher/VContentSwitcher.vue';

const tabs = [
    { label: 'Home', value: 'home' },
    { label: 'Profile', value: 'profile' },
    { label: 'Settings', value: 'settings' },
];

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

<template>
  <VContentSwitcher
      :tabs="tabs"
      v-model="selectedTab"
      :fullWidth="true"
  >
      <template #tab="{ tab }">
          <span>{{ tab.label }}</span>
      </template>
  </VContentSwitcher>
</template>

Examples

Full width