Files
policy-ui/.claude/skills/nuxt-ui/components/tabs.md
HaimKortovich a2eb1f3789 Add nuxt-skills and update auto quotes to use new policy API structure
- Add nuxt-skills (vue, nuxt, nuxt-ui) to .claude/skills/
- Create useCustomerSelection() composable for managing insured/buyer selection
- Create usePolicyApi() composable for policy API operations
- Update auto quote components to use insured/buyer instead of client
- Update vehicle fields: remove valorVehiculo, add market_value, requested_value, rc_limits
- Make chassis_number and engine_number optional
- Update auto quote types and composables to match new API structure
- Update auto quote page to submit to policy API with new structure
2026-04-27 14:56:53 -05:00

1.3 KiB

Tabs

A set of tab panels that are displayed one at a time.

Based on Reka UI Tabs

Key Props

  • items: as an array of objects with the following properties:

  • label?: string{lang="ts-type"}

  • icon?: string{lang="ts-type"}

  • avatar?: AvatarProps{lang="ts-type"}

  • badge?: string | number | BadgeProps{lang="ts-type"}

  • content?: string{lang="ts-type"}

  • value?: string | number{lang="ts-type"}

  • disabled?: boolean{lang="ts-type"}

  • slot?: string{lang="ts-type"}

  • class?: any{lang="ts-type"}

  • ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }{lang="ts-type"}

::component-code

ignore:

  • items
  • class external:
  • items externalTypes:
  • TabsItem[] props: items: - label: Account icon: 'i-lucide-user' content: 'This is the account content.
  • color: to change the color of the Tabs.
  • variant: to change the variant of the Tabs.
  • size: to change the size of the Tabs.
  • orientation: to change the orientation of the Tabs.
  • slot:

Usage

<UTabs
  <!-- props here -->
/>

Slots

  • #content