ProseTabs

Organize conteúdo relacionado em interfaces com abas interativas.

Uso

Use os componentes tabs e tabs-item para exibir Tabs no seu conteúdo.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="Code" icon="i-lucide-code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="Preview" icon="i-lucide-eye"}

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

:::

::

API

Props

Prop	Default	Type
`defaultValue`	`'0'`	`string` The default tab to select.
`sync`		`string` Sync the selected tab with a local storage key.
`hash`		`string` The hash to scroll to when the tab is selected.
`modelValue`		`string`
`ui`		`{ root?: SlotClass; } & { root?: SlotClass; list?: SlotClass; indicator?: SlotClass; trigger?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; label?: SlotClass; trailingBadge?: SlotClass; trailingBadgeSize?: SlotClass; content?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      tabs: {
        slots: {
          root: 'my-5 gap-4'
        }
      },
      tabsItem: {
        base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          tabs: {
            slots: {
              root: 'my-5 gap-4'
            }
          },
          tabsItem: {
            base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Steps

Transforme títulos em guias e tutoriais numerados, passo a passo.