选项卡
使用选项卡组件切换内容。
用法
将您的内容包裹在一个 Tabs 组件中。您可以将 label 和 icon 道具传递给子级以自定义选项卡。
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs
::div
---
label: Code
icon: i-heroicons-code-bracket-square
---
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
::
::div
---
label: Preview
icon: i-heroicons-magnifying-glass-circle
---
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::
::
如果您不想传递道具或使用代码块，您可能需要将子级包裹在一个
div 中。配置
{
wrapper: 'relative my-5 space-y-6',
header: 'flex items-center relative',
border: 'absolute bottom-0 inset-x-0 w-full h-px bg-gray-200 dark:bg-gray-800',
tab: {
base: 'px-4 py-2.5 font-semibold text-sm/6 flex items-center gap-1.5 border-b z-[1] focus-visible:outline-primary',
active: 'text-primary border-primary',
inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-transparent hover:border-gray-300 dark:hover:border-gray-700',
icon: {
base: 'w-5 h-5 flex-shrink-0'
}
}
}