Tabs Blade 组件

#简介

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>

Edit on GitHub

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