Version ^2.15.0

Flux 现在内置了一个 Carousel（轮播）组件。图片画廊、客户评价轮播、产品展示、精选房源——任何你需要滚动展示的内容，它都开箱即用。

让我们来看一看。

吸附与滚动

放入一个 flux:carousel，并按需添加任意数量的幻灯片。每张幻灯片都会自然地吸附到位，箭头控件会自动出现——当你滑到任一端时，它们甚至会自动隐藏：

<flux:carousel>
    <flux:carousel.slide class="w-full">
        <img src="/img/seascape.png" class="aspect-16/9 rounded-lg object-cover" />
    </flux:carousel.slide>
    <flux:carousel.slide class="w-full">
        <img src="/img/woodscape.png" class="aspect-16/9 rounded-lg object-cover" />
    </flux:carousel.slide>
    <!-- ... -->
</flux:carousel>

幻灯片可以是任意宽度——用 w-full 实现单张幻灯片画廊，用 w-1/3 实现多卡片布局，或使用响应式类（如 w-4/5 sm:w-1/2 md:w-1/3）在不同断点下自适应。

外部控件

对于精选房源或产品行这类布局，你大概不希望箭头按钮浮在内容上方。使用共享的 name，即可把控件放置在页面的任意位置：

<div class="flex justify-between items-center mb-4">
    <div>
        <flux:heading size="lg">Popular stays</flux:heading>
        <flux:text>Handpicked homes in beautiful places</flux:text>
    </div>
    <flux:carousel.controls name="popular-stays" />
</div>
<flux:carousel name="popular-stays" :arrows="false">
    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">
        <!-- ... -->
    </flux:carousel.slide>
</flux:carousel>

这些控件会保持同步——在到达两端时会自动禁用，与内置箭头的行为完全一致。

按页推进

默认情况下，箭头控件每次移动一张幻灯片。设置 advance="page" 即可按当前可见的幻灯片数量跳转——对于包含大量项目的网格来说体验更佳：

<flux:carousel advance="page">
    <!-- ... -->
</flux:carousel>

指示器与自动播放

对于客户评价这类较简单的轮播，可以用圆点指示器替换箭头。再加上自动播放，幻灯片就会自行切换——并在鼠标悬停或获得焦点时自动暂停：

<flux:carousel indicators autoplay autoplay:interval="3500">
    <!-- ... -->
</flux:carousel>

无障碍

当然，我们花了大量精力确保该组件遵循预期的键盘导航、焦点行为以及恰当的 aria-label，让屏幕阅读器也能同样顺畅地使用它。

查看 carousel 文档 →

版本 ^2.10.0

我们为 Flux 新增了一个“创建选项”组件，允许用户创建原始列表中不存在的自定义选项。

将它与胶囊组件的全新组合框变体搭配使用，可带来更直观的体验。

让我们一起看看这两个新功能。

全新的组合框变体

该变体支持在单一连续的流程中输入并选择，非常适合标签、标记和搜索驱动的交互。

<flux:pillbox variant="combobox" multiple>
    <flux:pillbox.option value="javascript">JavaScript</flux:pillbox.option>
    <flux:pillbox.option value="typescript">TypeScript</flux:pillbox.option>
    <flux:pillbox.option value="php">PHP</flux:pillbox.option>
</flux:pillbox>

全新的创建选项

在选项列表的开头或结尾添加 flux:pillbox.option.create 组件，当当前搜索与任何现有选项都不匹配时，Flux 会自动显示它。

<flux:pillbox wire:model="selectedTags" variant="combobox" multiple>
    <x-slot name="input">
        <flux:pillbox.input wire:model="search" />
    </x-slot>

    <!-- ... -->

    <flux:pillbox.option.create wire:click="createTag" min-length="2">
        Create tag "<span wire:text="search"></span>"
    </flux:pillbox.option.create>
</flux:pillbox>

你的“创建选项”逻辑现在可以放在 Livewire 组件中，并通过 wire:click 轻松接线。

public function createTag()
{
    $tag = Tag::create(['name' => $this->search]);

    $this->selectedTags[] = $tag->id;
}

智能校验

Flux 默认会处理常见的校验场景——例如阻止重复选项。它还支持重音敏感匹配，因此搜索 “Jose” 也能匹配到 “José”。

通过 min-length 控制“创建选项”提示出现的时机。若需完全掌控，可使用 Laravel 校验规则；校验错误会自动反映。

后端搜索

在使用后端过滤？没问题。设置 :filter="false" 后，Flux 会等待服务器响应，然后检查该选项是否唯一。在请求进行期间，“创建选项”也会被禁用，防止重复提交。

模态框

当创建流程需要不止一步操作时，请使用 modal 属性。这对于需要收集额外字段或在独立表单中运行校验等更复杂的流程十分有用。

<flux:pillbox.option.create modal="create-tag">
    <!-- ... -->
</flux:pillbox.option.create>

<flux:modal name="create-tag">
    <!-- ... -->
</flux:modal>

Select 组件支持

“创建选项”同样适用于 Select。无论是可搜索的 Select 还是组合框变体，行为与 API 都一致。

<flux:select wire:model="projectId" variant="combobox">
    <x-slot name="input">
        <flux:select.input wire:model="search" />
    </x-slot>

    <!-- ... -->

    <flux:select.option.create wire:click="createProject" min-length="2">
        Create project "<span wire:text="search"></span>"
    </flux:select.option.create>
</flux:select>

无障碍体验

当然，我们也尽全力确保“创建选项”和组合框流程符合预期的键盘导航、焦点行为，以及正确的 ARIA 标签，让屏幕阅读器同样易用。

前往 Pillbox 文档 和 Select 文档 ，了解更多示例和完整的 API 参考。

版本 ^2.6.2

评论区往往是一个产品最容易“半成品化”的地方：要做登录态、分页、楼中楼、点赞、删除、审核、Markdown、暗色模式……一项都不少。Flux Pro Max 的 flux:x-comment 把这些复杂度收进一个组件里：你只要放一行标签，就能得到一套可交互、可扩展、风格统一的评论系统。

这篇文章沿用 x-copy 博文的写法，用组件真实实现（stub）+ 官方文档的信息，带你快速掌握 x-comment 的用法与关键细节。

功能特性（你真正会用到的那一批）

来自官方文档的特性列表，结合实际交互体验，x-comment 重点解决这些问题：

• 发表评论 / 回复评论：支持多级嵌套（建议 1-5 层）。

• 点赞 / 取消点赞：评论互动最核心的反馈。

• 删除自己的评论：降低后台介入成本。

• 分页显示：避免长评论拖垮页面。

• 用户认证：与 Laravel Auth 配合，按用户身份操作。

• 响应式 + 深色模式：不用额外适配。

• Markdown 支持：评论可读性显著提升。

• 代码块语法高亮（Shiki）：技术社区、文档评论尤其受用。

• 配套审核组件：适合需要内容治理的站点。

文档入口：<https://fluxui.cn/promax/docs/components/comment>

最小可用：一行上评论区

<flux:x-comment />

在 stub 实现里，flux:x-comment 本质上是一个“壳”，真正的逻辑由 Livewire 组件 comment-list 承担：

@livewire('comment-list', [
    'commentKey' => $commentKey,
    'perPage' => $perPage,
    'defaultAvatar' => $defaultAvatar,
    'maxDepth' => $maxDepth,
    'defaultStatus' => (int) $defaultStatus,
    'commentMinLength' => $commentMinLength,
    'replyMinLength' => $replyMinLength,
    'supportMarkdown' => (bool) $supportMarkdown,
])

也因此：你调的大多数参数，最终都会变成 Livewire 的 props。

最重要的概念：comment-key（评论隔离）

commentKey 决定“这块评论区属于谁”。典型场景：

• 文章详情页：用文章 ID / slug

• 产品详情页：用产品 ID

• 文档某个章节：用章节路径或唯一 key

推荐写法：

<flux:x-comment comment-key="blog:{{ $post->id }}" />

如果你不传 comment-key，组件会尽可能用 当前路由名 作为标识；路由未命名则回退到 当前 URL。所以大多数页面可以直接 <flux:x-comment /> 开箱即用。

常用属性：控制体验，而不是“堆功能”

1) 每页数量：per-page

<flux:x-comment per-page="20" />

2) 回复层级：max-depth

<flux:x-comment max-depth="2" />

多级回复很爽，但层数越深越容易让移动端难读。通常 2-3 层是平衡点。

3) 默认头像：default-avatar

stub 默认值是 txt，表示用“文字头像”做兜底：

<flux:x-comment default-avatar="txt" />

（具体支持哪些值以你项目里 comment-list 的实现为准；文档里展示的是“图片/文字”两种思路。）

4) 默认状态：default-status

<flux:x-comment default-status="1" />

适合“默认待审核/默认可见”等策略切换（取决于你的评论模型约定）。

5) 标题与描述：label / description

stub 会在组件顶部渲染一段标题区：

<flux:x-comment
    label="讨论区"
    description="欢迎留言，文明交流。"
/>

Markdown 与代码高亮：两段开关，按需开启

1) 开启 Markdown：support-markdown

<flux:x-comment support-markdown="true" />

2) 开启代码高亮：support-markdown-code-highlight

<flux:x-comment
    support-markdown="true"
    support-markdown-code-highlight="true"
/>

这里有一个实现细节很值得一提：
当 supportMarkdown && supportMarkdownCodeHighlight 时，stub 会按需加载 Shiki（同 x-copy 一样走 https://esm.sh/shiki@3.0.0），并注入一组专门针对评论 Markdown 内容（.prose）的样式覆盖，包括：

• pre code 的 padding、圆角

• 暗色模式下 .shiki 的颜色变量覆盖

• 标题字号层级修正（h1~h6）

• 列表缩进与嵌套表现

• blockquote（含嵌套）更柔和的背景与边框

• table 的排版与边框

• link 的下划线样式与 hover 行为

这意味着：打开 Markdown 之后，评论区的排版已经被“产品化”处理过，不会像很多项目那样只是“能渲染”，但观感粗糙。

字数限制：避免“水贴”和无意义回复

stub 暴露了两个最小长度参数：

• commentMinLength（默认 5）

• replyMinLength（默认 5）

用法：

<flux:x-comment
    comment-min-length="10"
    reply-min-length="3"
/>

一个推荐配置（适合大多数内容站）

<flux:x-comment
    comment-key="blog:{{ $post->id }}"
    per-page="10"
    max-depth="2"
    default-avatar="txt"
    label="评论"
    description="欢迎讨论：请保持友善与克制。"
    support-markdown="true"
    support-markdown-code-highlight="true"
    comment-min-length="5"
    reply-min-length="3"
/>

小结

flux:x-comment 的价值不在于“把评论做出来”，而在于它把评论这块最碎、最难统一体验的模块，变成了一个：

• 一行接入

• 默认好看

• 细节完整

• 可控可扩展

• 与 Flux 设计语言一致

如果你正在做文档站、博客、SaaS 后台的反馈区或社区模块，它会是非常省心的一步。

• 文档：<https://fluxui.cn/promax/docs/components/comment>