Filament Tabs Blade 组件完全指南选项卡渲染、激活状态、图标徽章与垂直布局实战【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament导读Filament 的x-filament::tabsBlade 组件用于在任意视图中渲染一组选项卡Tabs借助点击切换在多个内容区块之间导航。本文以 docs/12-components/03-tabs.md 为骨架结合filament/support包中 Tabs 组件的 Blade 实现index.blade.php 与 item.blade.php以及面板页面子导航对它的复用方式tabs.blade.php系统讲解 Tabs 组件的全部属性、激活态触发、图标与徽章配置、锚点链接与垂直布局并给出可直接复制的实战示例。组件概述与基本用法Tabs 组件由容器x-filament::tabs与条目x-filament::tabs.item两层 Blade 组件构成前者渲染为语义化的nav元素后者默认渲染为button元素。最简单的用法如下x-filament::tabs labelContent 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其中label属性会被合并进nav的aria-label用于无障碍a11y语义标注未传入时使用翻译键filament::components/tabs.label的默认文案。从 index.blade.php 源码可见容器组件只做三件事合并aria-label、按contained/vertical属性追加fi-contained/fi-verticalCSS 类、输出$slot内容。默认渲染效果是一组横向排列、带圆角卡片底座的标签条对应.fi-tabs的非 contained 样式见 tabs.css。触发选项卡的激活状态默认情况下所有选项卡都不会呈现激活外观。要激活某个选项卡使用active布尔属性x-filament::tabs x-filament::tabs.item active Tab 1 /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs从 item.blade.php 源码可以看出active还会同步输出aria-current属性a标签时为pagebutton标签时为true并追加fi-activeCSS 类。激活态的视觉样式定义在 tabs.css底色变为gray-50暗色模式为white/5标签文字与图标变为主题色primary-700暗色模式为primary-400。基于 Livewire 状态的条件激活active支持动态绑定配合 Livewire 的wire:click即可实现点击切换激活项的交互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此时需要在 Livewire 组件类中维护$activeTab公共属性点击后由 Livewire 状态更新触发重渲染激活外观随之变化。这是 Filament 面板页面子导航在底层使用的核心机制——见 tabs.blade.php每个导航项都通过:active$isNavigationItemActive绑定激活状态并通过:href、taga渲染为链接。基于 Alpine.js 的条件激活如果不想经过服务端往返可以使用alpine-active属性配合 Alpine 表达式纯前端切换激活类x-filament::tabs x-data{ activeTab: tab1 } x-filament::tabs.item alpine-activeactiveTab tab1 x-on:clickactiveTab tab1 Tab 1 /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs从源码看alpine-active会生成x-bind:class指令表达式为真时追加fi-active类item.blade.php同时由于存在 Alpine 激活表达式fi-active不再由服务端active属性静态输出item.blade.php两者互不干扰。为选项卡设置图标每个选项卡都可以通过icon属性添加图标图标渲染基于Filament\Support\generate_icon_html()帮助函数定义于 helpers.php支持传入图标名或 BackedEnumx-filament::tabs x-filament::tabs.item iconheroicon-m-bell Notifications /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs图标默认渲染在标签文字之前before 位置且未激活时呈灰色gray-400暗色模式gray-500激活后与文字一同变为主题色视觉反馈一致。调整图标位置使用icon-position属性可以将图标放到标签文字之后x-filament::tabs x-filament::tabs.item iconheroicon-m-bell icon-positionafter Notifications /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs源码中icon-position会被规范化为Filament\Support\Enums\IconPosition枚举默认Before并在 Blade 模板中分别在标签之前/之后条件输出图标item.blade.php。需要注意的是icon-position与badge-icon-position是不同的属性前者控制选项卡图标的左右位置后者控制徽章内图标的左右位置。为选项卡设置徽章选项卡可以显示徽章Badge用于展示计数等短文本通过命名插槽badge提供内容x-filament::tabs x-filament::tabs.item Notifications x-slot namebadge 5 /x-slot /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs徽章的底层实现直接复用了x-filament::badge组件item.blade.php并支持badge-color、badge-icon、badge-icon-position、badge-tooltip等透传属性尺寸固定为sm。当badge内容是一个ComponentSlot即通过x-slot传入时内容会被原样输出传入纯字符串时则交给 Badge 组件按颜色方案渲染。面板页面子导航正是利用这一能力为每个导航项渲染badge、badge-color与badge-tooltiptabs.blade.php可见 Tabs 组件不仅是独立 UI 元素也是 Filament 页面导航体系的基础构件。延迟加载徽章数据Alpine 动态徽章除静态徽章外item 组件还支持alpine-deferred-badge-data与alpine-deferred-badge-loading属性当badge为空但提供了延迟数据表达式时组件会先渲染一个加载指示器占位符待 Alpine 数据就绪后通过x-if/x-bind动态渲染徽章及其图标、颜色与 Tooltipitem.blade.php。这一机制适用于徽章内容依赖异步数据如未读消息数的场景。将选项卡用作锚点链接默认情况下选项卡的底层 HTML 标签是button。通过tag属性可以改为a从而支持 URL 跳转x-filament::tabs x-filament::tabs.item :hrefroute(notifications) taga Notifications /x-filament::tabs.item {{-- Other tabs --}} /x-filament::tabs从源码看当tag a时href通过Filament\Support\generate_href_html()生成item.blade.php。该函数helpers.php会智能处理未传href时输出空字符串传了target_blank时附加target_blank否则若当前 URL 处于 SPA 模式自动追加wire:navigate启用 prefetch 时为wire:navigate.hover使点击在面板 SPA 内完成无刷新导航。此外target属性可在taga时指定链接打开方式type属性在tagbutton时控制按钮原生type默认button避免误触发表单提交。使用垂直选项卡通过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垂直模式下容器追加fi-vertical类CSS 将其切换为纵向 flex 排列、纵向溢出滚动并将每个选项卡项改为左对齐tabs.css。垂直选项卡特别适合侧边栏式的内容分区导航例如设置页的多个分组。容器属性contained 与嵌套样式虽然 docs/12-components/03-tabs.md 未展开说明但从 index.blade.php 的属性声明中可以确认容器还支持contained布尔属性非 contained 时标签条自带卡片底座圆角、阴影、描边contained 时则改为紧贴内容区的下边框样式border-b适用于嵌入在页面主体中的紧凑布局tabs.css。在垂直模式下contained 会切换为右侧边框border-e。实战组合示例将以上特性组合可以实现一个带图标、徽章、条件激活、Livewire 状态驱动的完整选项卡导航x-filament::tabs labelAccount settings x-filament::tabs.item iconheroicon-m-user :active$activeTab profile wire:click$set(activeTab, profile) Profile /x-filament::tabs.item x-filament::tabs.item iconheroicon-m-bell :active$activeTab notifications wire:click$set(activeTab, notifications) Notifications x-slot namebadge 5 /x-slot /x-filament::tabs.item x-filament::tabs.item iconheroicon-m-arrow-top-right-on-square icon-positionafter :hrefroute(profile.public) taga Public profile /x-filament::tabs.item /x-filament::tabs也可以参考 Filament 面板自身对 Tabs 组件的真实应用页面子导航视图 tabs.blade.php 将每个导航分组渲染为带图标的 Tabs item并把激活态、徽章、链接目标统一交由该组件处理其中无标签的分组直接渲染为taga的 Tabs item有标签的分组则用 dropdown 包裹展示出该组件在实际面板代码中的灵活组合方式。使用前提与组件归属Tabs 组件由filament/support包提供。Filament 使用独立组件式安装时需确保该包已安装可通过composer show filament/support确认。组件样式位于 tabs.css相关 JS 交互SPA 导航、Alpine 动态徽章由 Filament 前端资源统一加载Blade 组件本身零依赖直接复制上面的示例到任意 Filament 项目视图即可运行。若要深入定制外观可结合 docs/08-styling/01-overview.md 与 docs/08-styling/02-css-hooks.md 中的 CSS 钩子机制覆写fi-tabs、fi-tabs-item等类图标名体系可参考 docs/08-styling/04-icons.md徽章组件能力可参考 docs/12-components/03-badge.md。【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
