ZTabs

[yash-deepsource]

Description

ZTabs component(s) are used to generate a "Tab" style layout on the UI. An example of the same can be found on Headless UI.

Components

ZTabs

• Main wrapper component for all tabs.

Props

Prop	Default	Description
defaultIndex: Number	'0'	The default selected index.
vertical: Boolean (Draft)	'false'	Whether the tabs are in a vertical orientation or not.

Events

Event name	Emits	Description
change	activeTab: number	Emitted when the active tab changes.

ZTabList

TODO

ZTab

TODO

ZTabPanes

TODO

ZTabPane

TODO

Preview

TODO

Code example

<script setup lang="ts">
  import { ref } from 'vue'

  const onClose = (newState) => {
    isOpen.value = newState
  }
  const isOpen = ref(false)
</script>
<template>
  <button @click="isOpen = !isOpen"> Toggle </button>
  <z-confirm :open="isOpen" @close="onClose">
    Test
  </z-confirm>
</template>