创建选项 + 内联胶囊输入

版本 ^2.10.0

我们为 Flux 新增了一个“创建选项”组件，允许用户创建原始列表中不存在的自定义选项。

将它与胶囊组件的全新组合框变体搭配使用，可带来更直观的体验。

让我们一起看看这两个新功能。

全新的组合框变体

该变体支持在单一连续的流程中输入并选择，非常适合标签、标记和搜索驱动的交互。

<flux:pillbox variant="combobox" multiple>
    <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>

全新的创建选项

在选项列表的开头或结尾添加 flux:pillbox.option.create 组件，当当前搜索与任何现有选项都不匹配时，Flux 会自动显示它。

<flux:pillbox wire:model="selectedTags" variant="combobox" multiple>
    <x-slot name="input">
        <flux:pillbox.input wire:model="search" />
    </x-slot>

    <!-- ... -->

    <flux:pillbox.option.create wire:click="createTag" min-length="2">
        Create tag "<span wire:text="search"></span>"
    </flux:pillbox.option.create>
</flux:pillbox>

你的“创建选项”逻辑现在可以放在 Livewire 组件中，并通过 wire:click 轻松接线。

public function createTag()
{
    $tag = Tag::create(['name' => $this->search]);

    $this->selectedTags[] = $tag->id;
}

智能校验

Flux 默认会处理常见的校验场景——例如阻止重复选项。它还支持重音敏感匹配，因此搜索 “Jose” 也能匹配到 “José”。

通过 min-length 控制“创建选项”提示出现的时机。若需完全掌控，可使用 Laravel 校验规则；校验错误会自动反映。

后端搜索

在使用后端过滤？没问题。设置 :filter="false" 后，Flux 会等待服务器响应，然后检查该选项是否唯一。在请求进行期间，“创建选项”也会被禁用，防止重复提交。

模态框

当创建流程需要不止一步操作时，请使用 modal 属性。这对于需要收集额外字段或在独立表单中运行校验等更复杂的流程十分有用。

<flux:pillbox.option.create modal="create-tag">
    <!-- ... -->
</flux:pillbox.option.create>

<flux:modal name="create-tag">
    <!-- ... -->
</flux:modal>

Select 组件支持

“创建选项”同样适用于 Select。无论是可搜索的 Select 还是组合框变体，行为与 API 都一致。

<flux:select wire:model="projectId" variant="combobox">
    <x-slot name="input">
        <flux:select.input wire:model="search" />
    </x-slot>

    <!-- ... -->

    <flux:select.option.create wire:click="createProject" min-length="2">
        Create project "<span wire:text="search"></span>"
    </flux:select.option.create>
</flux:select>

无障碍体验

当然，我们也尽全力确保“创建选项”和组合框流程符合预期的键盘导航、焦点行为，以及正确的 ARIA 标签，让屏幕阅读器同样易用。

前往 Pillbox 文档 和 Select 文档 ，了解更多示例和完整的 API 参考。