标签输入

简介

标签输入组件可让你与标签列表交互。

默认情况下，标签以 JSON 存储：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')

若使用 Eloquent 保存 JSON 标签，请务必为模型属性添加 array 类型转换（cast）：

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'tags' => 'array',
        ];
    }

    // ...
}

TIP

Filament 也支持 spatie/laravel-tags。更多信息请参阅我们的 插件文档。

逗号分隔的标签

你可以让标签以分隔字符串而非 JSON 存储。为此，将分隔字符传给 separator() 方法：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->separator(',')

TIP

除了允许静态值外，separator() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

标签建议自动补全

标签输入可以提供自动补全建议。要启用此功能，将建议数组传给 suggestions() 方法：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->suggestions([
        'tailwindcss',
        'alpinejs',
        'laravel',
        'livewire',
    ])

TIP

除了允许静态数组外，suggestions() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

定义拆分按键

拆分按键可让你将用户键盘上的特定按键映射为创建新标签。默认情况下，用户按下「Enter」时会在输入中创建新标签。你也可以定义其他按键来创建新标签，例如「Tab」或「 」。为此，将按键数组传给 splitKeys() 方法：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->splitKeys(['Tab', ' '])

你可以 阅读有关按键可选值的更多信息。

TIP

除了允许静态数组外，splitKeys() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

为单个标签添加前缀与后缀

你可以为标签添加前缀与后缀，而不修改字段的实际状态。若需要向用户展示展示性格式化而不保存，这会很有用。可通过 tagPrefix() 或 tagSuffix() 方法实现：

use Filament\Forms\Components\TagsInput;

TagsInput::make('percentages')
    ->tagSuffix('%')

TIP

除了允许静态值外，tagPrefix() 和 tagSuffix() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到这些函数中。

重新排序标签

你可以使用 reorderable() 方法允许用户在字段内重新排序标签：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable()

可选地，你可以传入布尔值来控制标签是否可重新排序：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable(FeatureFlag::active())

TIP

除了允许静态值外，reorderable() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

更改标签颜色

你可以通过向 color() 方法传入 颜色 来更改标签颜色：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->color('danger')

TIP

除了允许静态值外，color() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

去除空白字符

你可以使用 trim() 方法自动去除每个标签首尾的空白字符：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->trim()

你可能希望为所有标签输入全局启用去除空白，类似于 Laravel 的 TrimStrings 中间件。可在服务提供者中使用 configureUsing() 方法实现：

use Filament\Forms\Components\TagsInput;

TagsInput::configureUsing(function (TagsInput $component): void {
    $component->trim();
});

标签校验

你可以通过向 nestedRecursiveRules() 方法传入规则数组，为每个标签添加校验规则：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->nestedRecursiveRules([
        'min:3',
        'max:255',
    ])