FluxUI 中文网 · 官方 Livewire UI 库 · Flux Pro Max 面包屑组件

显示侧边栏

flux:x-breadcrumb 是 Flux Pro Max 提供的一个页面访问记录面包屑组件，会自动记录带有命名路由的页面访问记录，并以面包屑的方式展示最近 N 条历史。

快速体验

下面是一个可以直接交互的面包屑组件示例，你可以通过在不同页面间跳转来观察访问记录。

<flux:x-breadcrumb />

安装步骤

使用 flux:x-breadcrumb 组件前，可以选择发布视图与配置文件；组件内部使用缓存记录访问历史，不依赖数据库迁移。

1. 重新构建资源

npm run build

2. 发布视图文件（可选）

php artisan flux-pro-max:publish x-breadcrumb --views

3. 发布配置文件（可选）

php artisan flux-pro-max:publish x-breadcrumb --configs

4. 发布语言包文件（可选）

php artisan flux-pro-max:publish x-breadcrumb --langs

配置说明

发布配置文件后，可以在 config/flux-x-breadcrumb.php 中调整默认展示条数以及路由名称到页面标题的映射。

配置示例

return [
    // 默认展示最近多少个访问页面链接
    'default_recent' => 5,

    // 路由名称 => 页面标题
    'routerNameToPageName' => [
        'home' => '首页',
        'promax.docs.components.comment' => '评论',
        'promax.docs.components.breadcrumb' => '面包屑',
    ],
];

基础用法

最简单的用法，直接在 Blade 视图中使用组件即可：

<flux:breadcrumb />

控制展示条数（limit）

通过 limit 属性可以控制展示最近多少个访问页面链接，默认会读取配置文件中的全局默认值。

<flux:x-breadcrumb limit="3" />

自定义标题（label）

label 用于在面包屑前方显示标题文案，例如“最近浏览”。设置为 null 时不显示标题。

<flux:x-breadcrumb
    limit="5"
    label="最近浏览"
/>

自定义样式（class）

class 属性会追加到组件外层容器上，方便根据页面需要调整外部间距、边框等样式。

<flux:x-breadcrumb
    limit="5"
    label="最近浏览"
    class="mt-4 border border-dashed border-zinc-200 dark:border-zinc-700"
/>

路由命名建议

面包屑依赖命名路由来记录访问历史，建议为需要出现在历史记录里的页面都添加 name(...)：

Route::get('/blog', function () {
    return view('docs.blog.show');
})->name('blog');

Route::get('/blog/{slug}', function ($slug) {
    return view('docs.blog.detail', ['slug' => $slug]);
})->name('blog.detail');

属性参考

下面列出了 flux:x-breadcrumb 支持的主要属性。

属性	类型	默认值	说明
limit	int	config('flux-x-breadcrumb.default_recent', 5)	控制展示最近多少条访问记录。可以通过配置文件 config/flux-x-breadcrumb.php 中的 default_recent 进行全局默认值调整。
label	string\|null	null	面包屑前方的标题文案，例如“最近浏览”。为 null 时不显示标题。
class	string	''	追加到外层容器上的自定义样式类名，方便根据具体页面场景进行间距、边框等样式微调。