显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

标签页

在单个容器内将内容组织成独立的面板。轻松在不同部分之间切换而无需离开页面。

对于全页面导航，请使用导航栏组件 ->

个人资料内容

账户内容

账单内容

<flux:tab.group>    <flux:tabs wire:model="tab">        <flux:tab name="profile">个人资料</flux:tab>        <flux:tab name="account">账户</flux:tab>        <flux:tab name="billing">账单</flux:tab>    </flux:tabs>    <flux:tab.panel name="profile">...</flux:tab.panel>    <flux:tab.panel name="account">...</flux:tab.panel>    <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>

带图标

将标签标签与图标关联，以视觉上区分不同的部分。

个人资料内容

账户内容

账单内容

<flux:tab.group>    <flux:tabs>        <flux:tab name="profile" icon="user">个人资料</flux:tab>        <flux:tab name="account" icon="cog-6-tooth">账户</flux:tab>        <flux:tab name="billing" icon="banknotes">账单</flux:tab>    </flux:tabs>    <flux:tab.panel name="profile">...</flux:tab.panel>    <flux:tab.panel name="account">...</flux:tab.panel>    <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>

边缘填充

默认情况下，标签页在边缘周围没有水平填充。如果你想要添加填充，可以通过向 tabs 和/或 tab.panel 组件添加 Tailwind 实用程序来实现。

<flux:tabs class="px-4">    <flux:tab name="profile">个人资料</flux:tab>    <flux:tab name="account">账户</flux:tab>    <flux:tab name="billing">账单</flux:tab></flux:tabs>

可滚动标签页

如果你的标签页超出了视窗范围，尤其是在移动设备上，你应该将它们设置为可滚动以防止水平溢出。

个人资料内容

账户内容

账单内容

安全内容

通知内容

集成内容

API内容

<flux:tab.group>    <flux:tabs scrollable>        <flux:tab name="profile">个人资料</flux:tab>        <flux:tab name="account">账户</flux:tab>        <flux:tab name="billing">账单</flux:tab>        <flux:tab name="security">安全</flux:tab>        <flux:tab name="notifications">通知</flux:tab>        <flux:tab name="integrations">集成</flux:tab>        <flux:tab name="api">API</flux:tab>    </flux:tabs>    <flux:tab.panel name="profile">...</flux:tab.panel>    <flux:tab.panel name="account">...</flux:tab.panel>    <flux:tab.panel name="billing">...</flux:tab.panel>    <flux:tab.panel name="security">...</flux:tab.panel>    <flux:tab.panel name="notifications">...</flux:tab.panel>    <flux:tab.panel name="integrations">...</flux:tab.panel>    <flux:tab.panel name="api">...</flux:tab.panel></flux:tab.group>

你可以通过添加 scrollable:scrollbar="hide" 来隐藏滚动条。请注意，这也会在桌面上隐藏它，而用户可能依赖它进行水平滚动。

渐隐边缘

使用 scrollable:fade 为右侧边缘添加渐隐效果。这个视觉提示表示在可见区域之外还有更多标签页可用。

个人资料内容

账户内容

账单内容

安全内容

通知内容

集成内容

API内容

<flux:tab.group>    <flux:tabs scrollable scrollable:fade>        <flux:tab name="profile">个人资料</flux:tab>        <flux:tab name="account">账户</flux:tab>        <flux:tab name="billing">账单</flux:tab>        <flux:tab name="security">安全</flux:tab>        <flux:tab name="notifications">通知</flux:tab>        <flux:tab name="integrations">集成</flux:tab>        <flux:tab name="api">API</flux:tab>    </flux:tabs>    <flux:tab.panel name="profile">...</flux:tab.panel>    <flux:tab.panel name="account">...</flux:tab.panel>    <flux:tab.panel name="billing">...</flux:tab.panel>    <flux:tab.panel name="security">...</flux:tab.panel>    <flux:tab.panel name="notifications">...</flux:tab.panel>    <flux:tab.panel name="integrations">...</flux:tab.panel>    <flux:tab.panel name="api">...</flux:tab.panel></flux:tab.group>

分段式标签页

通过视觉上分隔、类似按钮的标签页来在内容之间切换。适用于在宽度受限的容器内在视图之间切换。

<flux:tabs variant="segmented">    <flux:tab>列表</flux:tab>    <flux:tab>面板</flux:tab>    <flux:tab>时间线</flux:tab></flux:tabs>

分段式带图标

将分段式标签页与图标前缀结合。

<flux:tabs variant="segmented">    <flux:tab icon="list-bullet">列表</flux:tab>    <flux:tab icon="squares-2x2">面板</flux:tab>    <flux:tab icon="calendar-days">时间线</flux:tab></flux:tabs>

小型分段式标签页

对于更紧凑的布局，你可以使用 size="sm" 属性来使标签页更小。

<flux:tabs variant="segmented" size="sm">    <flux:tab>示例</flux:tab>    <flux:tab>代码</flux:tab></flux:tabs>

药丸式标签页

通过视觉上分隔、类似药丸的标签页来在内容之间切换。

<flux:tabs variant="pills">    <flux:tab>列表</flux:tab>    <flux:tab>面板</flux:tab>    <flux:tab>时间线</flux:tab></flux:tabs>

动态标签页

如果需要，你可以在你的 Livewire 组件中动态生成额外的标签页和面板。只需确保为新的标签页和面板使用匹配的名称。

<flux:tab.group>    <flux:tabs>        @foreach($tabs as $id => $tab)            <flux:tab :name="$id">{{ $tab }}</flux:tab>        @endforeach        <flux:tab icon="plus" wire:click="addTab" action>添加标签页</flux:tab>    </flux:tabs>    @foreach($tabs as $id => $tab)        <flux:tab.panel :name="$id">            <!-- ... -->        </flux:tab.panel>    @endforeach</flux:tab.group><!-- Livewire component example code...    public array $tabs = [        'tab-1' => 'Tab #1',        'tab-2' => 'Tab #2',    ];    public function addTab(): void    {        $id = 'tab-' . str()->random();        $this->tabs[$id] = 'Tab #' . count($this->tabs) + 1;    }-->

导航栏

构建响应式导航栏

单选按钮

允许用户从列表中选择单个选项

参考

flux:tab.group

标签页及其关联面板的容器。

插槽	描述
default	标签页和面板组件。

flux:tabs

属性	描述
wire:model	将活动标签页绑定到 Livewire 属性。请参阅 wire:model 文档
variant	标签页的视觉样式。选项：default、segmented、pills。
size	标签页的尺寸。选项：base（默认）、sm。
scrollable	启用水平滚动。
scrollable:scrollbar	当标签页可滚动时控制滚动条的可见性。选项：hide。
scrollable:fade	当标签页可滚动时为右侧边缘添加渐隐效果。

插槽	描述
default	单个标签页组件。

属性	描述
data-flux-tabs	应用到根元素以进行样式和标识。

flux:tab

属性	描述
name	标签页的唯一标识符，用于与其面板匹配。
icon	在标签页开头显示的图标名称。
icon:trailing	在标签页末尾显示的图标名称。
icon:variant	图标的变体。选项：outline、solid、mini、micro。
action	将标签页转换为操作按钮（用于“添加标签页”功能）。
accent	如果为 true，则对标签页应用强调色样式。
size	标签页的尺寸（仅在 variant="segmented" 时适用）。选项：base（默认）、sm。
disabled	禁用标签页。

插槽	描述
default	标签页标签内容.

属性	描述
data-flux-tab	应用到标签页元素以进行样式和标识。
data-selected	当标签页被选中/激活时应用。

flux:tab.panel

属性	描述
name	与关联标签页匹配的唯一标识符。

插槽	描述
default	当关联的标签页被选中时显示的面板内容.

属性	描述
data-flux-tab-panel	应用到面板元素以进行样式和标识。

标签页

相关组件

参考