版本 ^2.6.0

介绍时间选择器组件——当你需要用户选择特定时间时使用。非常适合预约安排、按时间范围筛选，或任何需要精确时间选择的场景。

组件处理了所有复杂性：12/24 小时制、时间间隔、不可用时段、键盘导航，以及完善的本地化。

<flux:time-picker wire:model="appointmentTime" />

输入或按钮触发

可选择按钮触发（打开时间选择下拉菜单），或输入框触发（提供原生时间输入，并可选配下拉增强）：

<flux:time-picker type="button" />
<flux:time-picker type="input" />

如果你想要纯原生体验，输入框变体甚至可通过 :dropdown="false" 完全禁用下拉。

了解触发类型 →

控制时间间隔

使用 interval 属性设置显示时间之间的间隔。默认是 30 分钟，但你可以使用任意数值：

<flux:time-picker interval="15" />  <!-- 15 分钟间隔 -->
<flux:time-picker interval="60" />  <!-- 每小时 -->

最小值、最大值与不可用时间

使用 min 和 max 边界限制可选时间——非常适合营业时间或基于时间的约束：

<flux:time-picker min="09:00" max="17:00" />

还提供了便捷的 “now” 简写：

<flux:time-picker min="now" />  <!-- 仅未来时间 -->

需要屏蔽特定时间或时间段？使用 unavailable 属性禁用已被预约或不可用的时段：

<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />

查看更多约束选项 →

多选时间

使用 multiple 属性允许用户选择多个时间：

<flux:time-picker multiple wire:model="availableTimes" />

自动本地化

时间选择器会自动使用浏览器的区域设置确定时间格式，但你可以覆盖它：

<flux:time-picker time-format="12-hour" />
<flux:time-picker time-format="24-hour" />
<flux:time-picker locale="ja-JP" />

细节

与 Flux 中的每个组件一样，我们面面俱到：

友好键盘操作：使用方向键完全导航，Enter 选择，Escape 关闭。屏幕阅读器会播报所有状态变化和可用选项。

智能默认：选择器会打开到当前已选时间；若未选择，则打开到当前时间。必要时可通过 open-to 覆盖。

无缝集成：与 label、description、badge 等标准字段属性配合，实现自动字段包装。

浏览时间选择器文档 →

版本 ^2.5.1

Flux 表格现已支持粘性表头和粘性列，可在用户滚动大型数据集时保持重要信息可见。

一起来看看。

粘性表头

在 table.columns 组件上添加 sticky 属性，可在垂直滚动时保持列表头可见：

<flux:table container:class="max-h-80">
    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">
        <flux:table.column>Customer</flux:table.column>
        <flux:table.column>Date</flux:table.column>
        <flux:table.column>Status</flux:table.column>
        <flux:table.column>Amount</flux:table.column>
    </flux:table.columns>

    <!-- ... -->
</flux:table>

表头行的背景色可防止下方行滚动时发生内容重叠。通过 container:class 属性为表格设置最大高度，可创建可滚动区域，同时将表头固定在顶部。

了解更多关于粘性表头 →

粘性列

在单独的 table.column 与 table.cell 组件上添加 sticky 属性，可在水平滚动时保持重要列可见。与粘性表头结合使用，可获得类似电子表格的体验：

<flux:table container:class="max-h-80">
    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">
        <flux:table.column sticky class="bg-white dark:bg-zinc-900">ID</flux:table.column>
        <flux:table.column>Customer</flux:table.column>
        <flux:table.column>Email</flux:table.column>
        <!-- ... -->
    </flux:table.columns>

    <flux:table.rows>
        @foreach ($this->orders as $order)
            <flux:table.row :key="$order->id">
                <flux:table.cell sticky class="bg-white dark:bg-zinc-900">{{ $order->id }}</flux:table.cell>
                <flux:table.cell>{{ $order->customer }}</flux:table.cell>
                <flux:table.cell>{{ $order->email }}</flux:table.cell>
                <!-- ... -->
            </flux:table.row>
        @endforeach
    </flux:table.rows>
</flux:table>

同时在列头和每一行中的对应单元格上应用 sticky。添加背景色以防止内容重叠；在滚动时我们会自动添加细微阴影，帮助用户识别该列覆盖在下方内容之上。

了解更多关于粘性列 →

查看 Table 文档以获取完整示例和 API 参考。

版本 ^2.5.0

Flux 现在提供了一个完整的文件上传组件，面向现代文件处理而构建。拖拽、进度跟踪、文件预览——开箱即用、体验出色。

<flux:file-upload wire:model="photos" multiple>
    <flux:file-upload.dropzone
        heading="将文件拖到此处或点击浏览"
        text="JPG、PNG、GIF，最大 10MB"
    />
</flux:file-upload>

拖放

文件上传组件自动处理拖放。用户可以直接从桌面拖拽文件，或点击浏览——按其所好。当文件被拖入时，组件会使用数据属性自动提供可用的视觉反馈，你可以配合 Tailwind 的 in-data-dragging: 前缀进行样式定制。

紧凑的行内布局

在空间更紧凑的场景中，可为投放区域添加 inline 属性，获得占用垂直空间更少的横向布局：

<flux:file-upload.dropzone
    heading="拖拽文件或点击浏览"
    text="JPG、PNG、GIF，最大 10MB"
    inline
/>

查看行内布局 →

内置进度跟踪

添加 with-progress 属性，组件将显示实时的上传进度。无需额外的 JavaScript——一切都已为你处理。

<flux:file-upload.dropzone
    heading="拖拽文件或点击浏览"
    text="JPG、PNG、GIF，最大 10MB"
    with-progress
/>

该组件暴露了 CSS 变量（--flux-file-upload-progress 与 --flux-file-upload-progress-as-string），因此如有需要，你可以创建自定义的进度指示器。

了解更多进度跟踪 →

完全可定制

flux:file-upload 外层封装处理了所有复杂功能——拖放、文件选择、上传进度——同时允许你自由使用任意自定义 HTML 来定义外观。这非常适合用于自定义头像上传器或特定的文件输入。

<flux:file-upload wire:model="photo">
    <!-- 在此放置你的自定义界面 -->
    <div class="...">
        <flux:icon name="user" />
    </div>
</flux:file-upload>

组件提供了 data-dragging 与 data-loading 属性，你可以配合 Tailwind 的工具类前缀来实现动态视觉反馈。

探索自定义上传器 →

展示已上传文件

flux:file-item 组件可显示已上传文件，支持自动图片预览、文件大小格式化与操作按钮。它会处理所有细节——文件名显示、大小格式化（KB、MB、GB）以及缩略图生成。

@foreach ($photos as $index => $photo)
    <flux:file-item
        :heading="$photo->getClientOriginalName()"
        :image="$photo->temporaryUrl()"
        :size="$photo->getSize()"
    >
        <x-slot name="actions">
            <flux:file-item.remove wire:click="removePhoto({{ $index }})" />
        </x-slot>
    </flux:file-item>
@endforeach

无缝集成 Livewire

与 Livewire 的文件上传系统完美协作。只需添加 wire:model 即可——单文件、多文件、校验、临时 URL，全都能正常工作。

文档包含单文件与多文件上传的完整示例及完整的 Livewire 组件代码。

查看 Livewire 集成示例 →

与原生文件输入同样工作

该文件上传组件会派发与原生 <input type="file"> 元素相同的事件，并拥有相同的属性。这意味着你很可能可以将其与常用的第三方库一起使用。

无障碍内置

我们确保该文件上传组件在移动设备与屏幕阅读器上都能良好工作。所有交互元素都具备恰当的 ARIA 标签，键盘导航符合预期，焦点管理也会自动处理。

查看文件上传文档以获取完整示例与 API 参考。