Tags input

#概述

标签输入(TagsInput)组件允许你与标签列表进行交互。

默认情况下，标签以 JSON 格式保存：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')

如果你使用 Eloquent 保存 JSON 标签，你应该将 array casts 添加到相应的模型属性中：

use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    protected $casts = [
        'tags' => 'array',
    ];
 
    // ...
}
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $casts = [
        'tags' => 'array',
    ];

    // ...
}

Filament 也支持 spatie/laravel-tags 包。更多信息请查看插件文档。

#逗号分隔标签

你可以允许标签以分隔字符串而非 JSON 格式保存。要进行设置，请将分隔字符传入到 separator() 方法中：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->separator(',')
use Filament\Forms\Components\TagsInput;

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

#自动标签补全建议

标签输入可以由自动补全建议。要启用该功能，请将建议数组传入到 suggestions() 方法中：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->suggestions([
        'tailwindcss',
        'alpinejs',
        'laravel',
        'livewire',
    ])
use Filament\Forms\Components\TagsInput;

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

#定义拆分键

拆分键(Split Key)允许你将用户键盘上指定的按键映射到创建新标签。默认情况下，当用户按下 "Enter" 键时，输入框中会创建新标签。你也可以定义其他键，比如 "Tab" 键、空格键，来创建新标签。要实现该功能，请传入键数组到 splitKeys() 方法：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->splitKeys(['Tab', ' '])
use Filament\Forms\Components\TagsInput;

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

更多可能的按键选项请查阅此处。

#添加前缀和后缀到单独的标签

在不修改字段的真实状态的情况下，你可用在标签上添加前缀和后缀。如果你需要在不保存的情况下，向用户显示直观的格式，这很有用。该功能可以使用 tagPrefix() 或 tagSuffix() 方法实现：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('percentages')
    ->tagSuffix('%')
use Filament\Forms\Components\TagsInput;

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

#标签重新排序

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

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->reorderable()
use Filament\Forms\Components\TagsInput;

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

#修改标签颜色

将标签的颜色传递给 color() 方法，你可以修改标签颜色。其值可以为 danger、gray、info、primary、success 或 warning：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->color('danger')
use Filament\Forms\Components\TagsInput;

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

#标签验证

将规则数组传入到 nestedRecursiveRules() 方法中，你可以为每个标签添加验证规则：

use Filament\Forms\Components\TagsInput;
 
TagsInput::make('tags')
    ->nestedRecursiveRules([
        'min:3',
        'max:255',
    ])
use Filament\Forms\Components\TagsInput;

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

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion