一个多选组件，将选中的项目显示为可移除的"胶囊"，根据需要扩展输入区域。
<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>在胶囊盒内直接展示输入框。
<flux:pillbox variant="combobox" multiple 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.option.create> 组件，让用户创建新的选项。
当搜索输入与列表中的现有项目匹配时，Flux 会自动隐藏创建选项。你也可以通过 min-length 属性指定显示创建选项所需的最小字符数。
<flux:pillbox wire:model="selectedTags" variant="combobox" multiple> <x-slot name="input"> <flux:pillbox.input wire:model="search" placeholder="Choose tags..." /> </x-slot> @foreach ($this->tags as $tag) <flux:pillbox.option :value="$tag->id">{{ $tag->name }}</flux:pillbox.option> @endforeach <flux:pillbox.option.create wire:click="createTag" min-length="2"> Create new "<span wire:text="search"></span>" </flux:pillbox.option.create></flux:pillbox><!--public $search = '';public $selectedTags = [];public function createProject(){ $tag = Tag::create([ 'name' => $this->search, ]); $this->selectedTags[] = $tag->id; $this->search = '';}-->如果你使用 :filter="false"，请确保在搜索输入被清空时，查询结果始终包含新创建的项目。
Flux 会在请求期间自动禁用创建选项以避免重复，并在列表更新时在前端执行唯一性检查。
<flux:pillbox wire:model.live="selectedTags" variant="combobox" multiple :filter="false"> <x-slot name="input"> <flux:pillbox.input wire:model.live="search" placeholder="Choose tags..." /> </x-slot> @foreach($this->tags as $tag) <flux:pillbox.option :value="$tag->id">{{ $tag->name }}</flux:pillbox.option> @endforeach <flux:pillbox.option.create wire:click="createTag" min-length="2"> Create "<span wire:text="search"></span>" </flux:pillbox.option.create></flux:pillbox><!--#[\Livewire\Attributes\Computed]public function tags() { return \App\Models\Tag::query() ->where('name', 'like', '%' . trim($this->search) . '%') ->limit(20)->get() ->when(blank($this->search) && $this->selectedTags, function ($results) { return \App\Models\Tag::query() ->whereIn('id', $this->selectedTags) ->whereNotIn('id', $results->pluck('id')) ->get()->merge($results); });}--><flux:pillbox wire:model="selectedTags" variant="combobox" multiple :filter="false"> ... <x-slot name="empty"> <flux:pillbox.option.empty when-loading="Loading tags..."> No tags found. </flux:pillbox.option.empty> </x-slot></flux:pillbox>当你在后端执行额外验证时，只要存在验证错误，搜索输入框就会显示为无效状态。请确保在用户更新输入时重置错误信息。
<flux:pillbox wire:model.live="selectedTags" variant="combobox" multiple placeholder="Choose tags..." :filter="false"> <x-slot name="input"> <flux:pillbox.input wire:model.live="search" placeholder="Choose tags..." /> </x-slot> ... <flux:pillbox.option.create wire:click="createTag" min-length="2"> Create "<span wire:text="search"></span>" </flux:pillbox.option.create></flux:pillbox><!--public function createTag() { $this->validate(['search' => 'required|unique:tags,name']); // Create logic...}public function updatedSearch() { $this->resetErrorBag('search');}-->使用 modal 属性来指定要打开的模态框名称，并在表单中处理更复杂的创建流程。
<flux:pillbox wire:model="projectId" variant="combobox" placeholder="Choose project..."> <flux:pillbox.option.create modal="create-tag">Create new</flux:pillbox.option> @foreach($this->tags as $tag) <flux:pillbox.option :value="$tag->id">{{ $tag->name }}</flux:pillbox.option> @endforeach</flux:pillbox><flux:modal name="create-tag" class="md:w-96"> <form wire:submit="createTag" class="space-y-6"> <div> <flux:heading size="lg">Create new tag</flux:heading> <flux:text class="mt-2">Enter the name of the new tag.</flux:text> </div> <flux:input wire:model="newTagName" label="Name" placeholder="e.g. 'Research'" /> <div class="flex"> <flux:spacer /> <flux:button type="submit" variant="primary">Create</flux:button> </div> </form></flux:modal>|
属性
|
描述
|
|---|---|
| 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。
|
|
属性
|
描述
|
|---|---|
| min-length |
在搜索输入中显示创建选项前所需的最少字符数。
|
| modal |
选中创建项时需要打开的模态框名称。
|
| wire:click |
选中创建项时调用的 Livewire 动作。
|
|
属性
|
描述
|
|---|---|
| placeholder |
搜索输入框的占位符文本。默认为"Search..."。
|
| icon |
在搜索输入框中显示的图标。默认为放大镜。
|
| clearable |
如果为 true，当搜索输入框有文本时显示清除按钮。默认：true。
|
|
属性
|
描述
|
|---|---|
| placeholder |
未选择胶囊时显示的文本。
|
| invalid |
对触发元素应用错误样式。
|
| size |
触发器的尺寸。选项：sm。
|
| clearable |
在触发器中显示清除全部按钮。
|