Tabs

Copy<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VTabs,
  VTabsContent,
  VTabsList,
  VTabsTrigger,
} from '@ui-kit/src/components/Base/VTabs'
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VTabs default-value="account" class="w-full max-w-lg">
    <VTabsList>
      <VTabsTrigger value="account">Account</VTabsTrigger>
      <VTabsTrigger value="security">Security</VTabsTrigger>
    </VTabsList>

    <VTabsContent value="account">
      <div class="grid gap-4">
        <div>
          <p>Account settings</p>
          <p>Update the basics for this workspace.</p>
        </div>
        <label class="grid gap-1">
          <span>Workspace name</span>
          <input value="Webdevelop UI Kit">
        </label>
        <VButton>
      Save account
    </VButton>
      </div>
    </VTabsContent>

    <VTabsContent value="security">
      <div class="grid gap-4">
        <div>
          <p>Security</p>
          <p>Control access and release approvals.</p>
        </div>
        <label class="grid gap-1">
          <span>Approval group</span>
          <input value="Frontend leads">
        </label>
        <VButton variant="outlined">
      Save security
    </VButton>
      </div>
    </VTabsContent>
  </VTabs>
</template>