tabs 组件允许您渲染一组选项卡，可用于在多个内容部分之间切换：
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item>
Tab 1
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 3
</x-filament::tabs.item>
</x-filament::tabs>默认情况下，标签页不会显示为“活动”。要让标签页显示为活动，你可以使用 active 属性：
<x-filament::tabs>
<x-filament::tabs.item active>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>你也可以使用 active 属性使选项卡有条件地显示为活动状态：
<x-filament::tabs>
<x-filament::tabs.item
:active="$activeTab === 'tab1'"
wire:click="$set('activeTab', 'tab1')"
>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>或者您可以使用 alpine-active 属性，利用 Alpine.js 有条件地使选项卡显示为活动状态：
<x-filament::tabs x-data="{ activeTab: 'tab1' }">
<x-filament::tabs.item
alpine-active="activeTab === 'tab1'"
x-on:click="activeTab = 'tab1'"
>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>选项卡可以有一个图标，您可以使用icon属性来设置：
<x-filament::tabs>
<x-filament::tabs.item icon="heroicon-m-bell">
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>选项卡的图标可以使用 icon-position 属性定位在标签之前或之后：
<x-filament::tabs>
<x-filament::tabs.item
icon="heroicon-m-bell"
icon-position="after"
>
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>选项卡可以包含一个 徽章，您可以使用 badge 插槽进行设置：
<x-filament::tabs>
<x-filament::tabs.item>
Notifications
<x-slot name="badge">
5
</x-slot>
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>默认情况下，选项卡的底层 HTML 标签是 <button>。你可以通过使用 tag 属性将其更改为 <a> 标签：
<x-filament::tabs>
<x-filament::tabs.item
:href="route('notifications')"
tag="a"
>
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>您可以通过使用 vertical 属性将选项卡垂直渲染：
<x-filament::tabs vertical>
<x-filament::tabs.item>
Tab 1
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 3
</x-filament::tabs.item>
</x-filament::tabs>