Tabs Blade component

#概述

选项卡(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>
<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"。要让选项卡显示为激活，你可以使用 active 属性：

<x-filament::tabs>
    <x-filament::tabs.item active>
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>
<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>
<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>
<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>
<x-filament::tabs>
    <x-filament::tabs.item icon="heroicon-m-bell">
        Notifications
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

#设置选项卡图标位置

使用 icon-position 你可以将选项卡的图标设置为在标签的前面(before)或者后面(after)：

<x-filament::tabs>
    <x-filament::tabs.item
        icon="heroicon-m-bell"
        icon-position="after"
    >
        Notifications
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>
<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>
<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>
<x-filament::tabs>
    <x-filament::tabs.item
        :href="route('notifications')"
        tag="a"
    >
        Notifications
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion