Skip to main content

type

Description​

Optional. Sets the position of the Tabs control

Usage​

type?: "top" | "bottom";

Default​

"top"

Example​

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

  const tabs = [
    { id: 0, label: "Info", icon: "wxi-alert" },
    { id: 1, label: "About" },
    { id: 2, label: "Contact" },
    { id: 3, label: "", icon: "wxi-check" },
  ];

  const active = ref(2);
</script>

<template>
  <div class="tabbar">
    <div v-if="active === 0" class="body">Info</div>
    <div v-else-if="active === 1" class="body">About</div>
    <div v-else-if="active === 2" class="body">Contact</div>
    <div v-else class="body">Check</div>
    <Tabs :options="tabs" v-model:value="active" type="bottom" />
  </div>
</template>

Details​

The property is used to ensure the correct styling of the bottom panel with tabs. It should be set, since the styling may differ depending on the used skin.

Related article: Setting the position of tabs

Related sample: Tabs