版本 ^2.9.0

加载状态很重要。精心设计的骨架屏可以在内容加载时保持用户的专注，让你的应用感觉更快、更精致。

下面介绍骨架屏，这是一个用于创建占位内容的灵活组件。

<flux:skeleton.group animate="shimmer" class="flex items-center gap-4">
    <flux:skeleton class="size-10 rounded-full" />
    <div class="flex-1">
        <flux:skeleton.line />
        <flux:skeleton.line class="w-1/2" />
    </div>
</flux:skeleton.group>

文本占位符

skeleton.line 组件会模拟真实文本——它占据完整的行高，但只渲染一条更细的条形，从而获得更接近真实文本的自然比例：

<flux:skeleton.group>
    <flux:skeleton.line class="mb-2 w-1/4" />
    <flux:skeleton.line />
    <flux:skeleton.line />
    <flux:skeleton.line class="w-3/4" />
</flux:skeleton.group>

动画选项

你可以在闪动（shimmer）和呼吸（pulse）动画之间选择，或者完全不使用动画。skeleton.group 组件允许你只设置一次动画，然后所有子骨架组件都会继承这个设置：

<!-- 闪动动画 -->
<flux:skeleton.group animate="shimmer">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 呼吸动画 -->
<flux:skeleton.group animate="pulse">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 无动画 -->
<flux:skeleton.line />

真实场景示例

你可以为任何东西构建骨架状态——表格、卡片、图表、个人资料等。下面是一个表格加载状态示例：

<flux:skeleton.group animate="shimmer">
    <flux:table>
        <flux:table.columns>
            <flux:table.column>Customer</flux:table.column>
            <flux:table.column>Date</flux:table.column>
            <flux:table.column>Status</flux:table.column>
        </flux:table.columns>
        <flux:table.rows>
            @foreach (range(1, 5) as $i)
                <flux:table.row>
                    <flux:table.cell>
                        <div class="flex items-center gap-2">
                            <flux:skeleton class="rounded-full size-5" />
                            <flux:skeleton.line />
                        </div>
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>
</flux:skeleton.group>

查看 骨架屏 文档，了解更多示例和完整的 API 参考。

版本：^2.8.0

无论是搭建价格筛选、调节设置，还是选择一个数值区间，滑块几乎适用于各种界面。现在，Flux 自带了一个功能完备的 Slider 组件。
下面一起来看看。

<flux:slider wire:model="employees" />

范围选择

需要选择一个区间而不是单个值？添加 range 属性即可获得两个滑块——非常适合价格区间、日期区间或任意最小值/最大值过滤场景。

<flux:slider range wire:model="budget" />

在你的 Livewire 组件中绑定到一个数组，这两个数值会实时更新：

public array $range = [200, 800];

精细控制

通过 min、max、step 和 min-steps-between 精确配置滑块行为：

<flux:slider
    range
    min="0"
    max="1000"
    step="10"
    min-steps-between="10"
/>

min-steps-between 属性会确保范围滑块的两个滑块之间始终保持最小间距——比如当 step 为 10 且 min-steps-between 为 10 时，两个滑块之间的距离始终至少为 100 个单位。

视觉刻度

在滑块下方添加刻度，帮助用户理解步长和数值。你可以展示简单的刻度线、数字，或自定义标签：

<!-- 简单刻度线 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i" />
    @endforeach
</flux:slider>

<!-- 带数字 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i">{{ $i }}</flux:slider.tick>
    @endforeach
</flux:slider>

<!-- 自定义标签 -->
<flux:slider min="1" max="5">
    <flux:slider.tick value="1">Low</flux:slider.tick>
    <flux:slider.tick value="3">Mid</flux:slider.tick>
    <flux:slider.tick value="5">High</flux:slider.tick>
</flux:slider>

自定义样式

使用 track:class 和 thumb:class 自由定制样式。想要更厚实一点的滑块？没问题：

<flux:slider track:class="h-3 bg-blue-600" thumb:class="size-5" />

这些属性在保持完整功能的同时，给你充分的外观控制能力。

那些重要的细节

我们在这个组件上非常用心，希望你能感受到这些打磨。

• 偏移鼠标跟踪：当你点击并拖动滑块时，不会把滑块中心强行对齐到鼠标位置——这让你在微调（比如只移动一两个步长）时感觉更加自然、精确。

• 智能滑块行为：在范围模式下，两个滑块不会交叉并导致区间反转。右侧滑块在它们靠得很近时会始终保持在上方，避免搞混哪个是哪个。

• 大步长：按住 Shift 再用方向键，可以通过 big-step 属性按更大的增量跳动——非常适合在大范围内快速移动。

可访问性

当然，我们也投入了大量精力，确保这个组件在键盘导航、焦点指示以及合适的 ARIA 标签方面都符合预期，让依赖屏幕阅读器的用户也能顺畅使用。方向键可以调节数值，在范围滑块中你可以通过 Tab 在不同滑块之间切换焦点。

查看 Slider 文档以获取更多示例和完整的 API 参考。

版本：^2.8.0

双重身份验证、邮箱验证码、PIN 码输入——OTP 输入框已经无处不在。我们认为 Flux 也应该把它们处理得足够优雅。

这就是 OTP Input：一个用于通过多个独立输入框采集一次性密码（One-Time Password, OTP）的组件。下面一起来看看。

<flux:otp wire:model="code" length="6" />

自动提交

添加 submit="auto" 后，当所有输入框都被填写完成时，表单会自动提交——完全不需要提交按钮。非常适合对体验流畅度和速度要求很高的验证流程。

<flux:otp wire:model="code" length="6" submit="auto" />

不仅仅是数字

需要字母数字混合的验证码或 PIN 吗？mode 属性可以满足你的需求。将其设置为 alphanumeric 可用于序列号或许可证密钥；使用 private 则可以遮盖像 PIN 码这样的敏感值。

<!-- 许可证密钥 -->
<flux:otp wire:model="licenseKey" length="10" mode="alphanumeric" />
<!-- PIN 码 -->
<flux:otp wire:model="pin" length="4" private />

自定义布局

使用 separators 和 groups 来匹配你的设计需求。非常适合电话号码、信用卡号或任何需要分组显示的格式：

<flux:otp wire:model="code">
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
    <flux:otp.separator />
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
</flux:otp>

智能输入行为

一如既往，我们投入了大量精力，确保这个组件是世界一流的。

• 智能粘贴：粘贴完整验证码后，组件会自动将字符分配到所有输入框中——无需逐个输入。

• 智能导航：方向键可在输入框之间移动，退格键会回跳并清除前一个输入框内容，输入字符后自动跳到下一个输入框。

• 自动填充支持：第一个输入框默认带有 autocomplete="one-time-code"，因此浏览器和密码管理器可以自动从短信或验证器应用中建议填入验证码。

可访问性

当然，我们也确保该组件在键盘导航、焦点管理和合适的 ARIA 标签方面都符合预期，这样依赖屏幕阅读器的用户也能顺畅使用。每个输入框都会告知自己在序列中的位置以及期望的总位数。

查看 OTP Input 文档以获取更多示例和完整的 API 参考。