版本 ^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 参考。

版本 ^2.4.0

介绍 Pillbox，这是一种选择组件，可将已选项目直接在输入区域内显示为可移除的药丸。非常适合标签系统、技能选择器，或任何需要让所选值清晰可见的多选场景。

与传统将选择项隐藏在下拉菜单中的多选不同，Pillbox 可一目了然地展示所有选择，每个选择都会变成一个可移除的药丸，并在需要时扩展输入区域。

<flux:pillbox wire:model="tags" multiple placeholder=" ">
    <flux:pillbox.option value="design"> </flux:pillbox.option>
    <flux:pillbox.option value="development"> </flux:pillbox.option>
    <flux:pillbox.option value="marketing"> </flux:pillbox.option>
</flux:pillbox>

在选项中搜索

添加 searchable 属性以便在大型列表中筛选。搜索输入会直接显示在下拉中，帮助你快速找到所需内容。

<flux:pillbox multiple searchable placeholder=" ">
    <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>

详细说明

我们构建了 Pillbox 以应对多选输入的真实复杂性：

可视化反馈：每个药丸都有自己的移除按钮，清晰表明如何取消选择单个项目。随着添加更多药丸，输入区域会自然扩展。

默认具备无障碍：屏幕阅读器会播报已选项目、可用选项和状态变化。ARIA 属性自动处理。

自定义内容：选项不仅限于文本。可添加图标或自定义 HTML 以增强可识别性。

查看 Pillbox 文档 →