一个多选组件，将选中的项目显示为可移除的"胶囊"，根据需要扩展输入区域。
<flux:pillbox wire:model="selectedTags" multiple placeholder="Choose tags..."> <flux:pillbox.option value="design">Design</flux:pillbox.option> <flux:pillbox.option value="development">Development</flux:pillbox.option> <flux:pillbox.option value="marketing">Marketing</flux:pillbox.option> <flux:pillbox.option value="sales">Sales</flux:pillbox.option> <flux:pillbox.option value="support">Support</flux:pillbox.option> <flux:pillbox.option value="engineering">Engineering</flux:pillbox.option> <flux:pillbox.option value="product">Product</flux:pillbox.option> <flux:pillbox.option value="operations">Operations</flux:pillbox.option></flux:pillbox>用于更紧凑布局的小尺寸胶囊盒元素。
<flux:pillbox size="sm" multiple placeholder="Choose tags..."> <flux:pillbox.option value="design">Design</flux:pillbox.option> <flux:pillbox.option value="development">Development</flux:pillbox.option> <flux:pillbox.option value="marketing">Marketing</flux:pillbox.option> <flux:pillbox.option value="sales">Sales</flux:pillbox.option> <flux:pillbox.option value="support">Support</flux:pillbox.option> <flux:pillbox.option value="engineering">Engineering</flux:pillbox.option> <flux:pillbox.option value="product">Product</flux:pillbox.option> <flux:pillbox.option value="operations">Operations</flux:pillbox.option></flux:pillbox>添加搜索输入框以过滤大量选项列表。
<flux:pillbox multiple searchable placeholder="Choose skills..."> <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.option value="python">Python</flux:pillbox.option> <flux:pillbox.option value="ruby">Ruby</flux:pillbox.option> <flux:pillbox.option value="go">Go</flux:pillbox.option> <flux:pillbox.option value="rust">Rust</flux:pillbox.option> <flux:pillbox.option value="java">Java</flux:pillbox.option> <flux:pillbox.option value="csharp">C#</flux:pillbox.option> <flux:pillbox.option value="swift">Swift</flux:pillbox.option></flux:pillbox><flux:pillbox multiple searchable search:placeholder="Filter skills..."> ...</flux:pillbox>为选项添加图标以便更好地视觉识别。
<flux:pillbox multiple placeholder="Choose platforms..."> <flux:pillbox.option value="github"> <div class="flex items-center gap-2"> <flux:icon.code-bracket variant="mini" class="text-zinc-400" /> GitHub </div> </flux:pillbox.option> <flux:pillbox.option value="gitlab"> <div class="flex items-center gap-2"> <flux:icon.server variant="mini" class="text-zinc-400" /> GitLab </div> </flux:pillbox.option> <flux:pillbox.option value="bitbucket"> <div class="flex items-center gap-2"> <flux:icon.cloud variant="mini" class="text-zinc-400" /> Bitbucket </div> </flux:pillbox.option></flux:pillbox>|
属性
|
描述
|
|---|---|
| wire:model |
将胶囊盒绑定到 Livewire 属性。模型应该是一个数组来存储多个选中的值。更多信息请参见 wire:model 文档。
|
| placeholder |
未选择胶囊时显示的文本。
|
| label | |
| description |
显示在胶囊盒下方的帮助文本。与 label 一起提供时，出现在 flux:field 包装器内的标签和胶囊盒之间。
|
| size |
胶囊盒的尺寸。选项：sm。
|
| searchable |
在下拉菜单内添加搜索输入框以过滤选项。
|
| search:placeholder |
当 searchable 为 true 时搜索输入框的自定义占位符文本。
|
| filter |
如果为 false，则禁用动态服务器端选项的客户端过滤。
|
| disabled |
阻止用户与胶囊盒交互。
|
| invalid |
对胶囊盒边框应用错误样式。
|
|
插槽
|
描述
|
|---|---|
| default |
胶囊盒选项。应包含 flux:pillbox.option 组件。
|
| trigger |
下拉菜单的自定义触发元素。替换默认的胶囊容器。
|
| search |
下拉菜单的自定义搜索输入框。用于需要连接自定义搜索行为时。
|
| empty |
当没有选项匹配搜索查询时显示的内容。
|
|
属性
|
描述
|
|---|---|
| data-flux-pillbox |
应用于根元素用于样式和 JavaScript 行为。
|
|
属性
|
描述
|
|---|---|
| value |
与此选项关联的值。这是选中时存储在模型数组中的内容。
|
| disabled |
阻止此选项被选中。
|
| filterable |
如果为 false，此选项不会被搜索过滤器隐藏。对"无结果"消息很有用。
|
|
插槽
|
描述
|
|---|---|
| default |
选项内容。可以包含文本、图标、图像或任何自定义 HTML。
|
|
属性
|
描述
|
|---|---|
| placeholder |
搜索输入框的占位符文本。默认为"Search..."。
|
| icon |
在搜索输入框中显示的图标。默认为放大镜。
|
| clearable |
如果为 true，当搜索输入框有文本时显示清除按钮。默认：true。
|
|
属性
|
描述
|
|---|---|
| placeholder |
未选择胶囊时显示的文本。
|
| invalid |
对触发元素应用错误样式。
|
| size |
触发器的尺寸。选项：sm。
|
| clearable |
在触发器中显示清除全部按钮。
|