Pillbox

版本 ^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 文档 →