跳到主要内容

开关按钮组

简介​

开关按钮输入提供了一组按钮，用于从预定义选项列表中选择单个值或多个值：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
提示

options() 方法除了接受静态数组外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

开关按钮组

更改选项按钮的颜色​

你可以使用 colors() 方法更改选项按钮的颜色。数组中的每个键应对应一个选项值：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
    ->colors([
        'draft' => 'info',
        'scheduled' => 'warning',
        'published' => 'success',
    ])

如果你使用枚举作为选项，可以使用 HasColor 接口来定义颜色。

提示

colors() 方法除了接受静态数组外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

不同颜色的开关按钮组

为选项按钮添加图标​

你可以使用 icons() 方法为选项按钮添加图标。数组中的每个键应对应一个选项值，值可以是任何有效的图标：

use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Icons\Heroicon;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
    ->icons([
        'draft' => Heroicon::OutlinedPencil,
        'scheduled' => Heroicon::OutlinedClock,
        'published' => Heroicon::OutlinedCheckCircle,
    ])
提示

icons() 方法除了接受静态数组外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

如果你使用枚举作为选项，可以使用 HasIcon 接口来定义图标。

带有图标的开关按钮组

如果你想只显示图标，可以使用 hiddenButtonLabels() 隐藏选项标签。

隐藏标签的开关按钮组

为选项按钮添加工具提示​

你可以使用 tooltips() 方法为每个选项按钮添加不同的工具提示。

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->tooltips([
        'draft' => 'Set as a draft before publishing.',
        'scheduled' => 'Schedule publishing on a specific date.',
        'published' => 'Publish now',
    ])
提示

tooltips() 方法除了接受静态数组外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

带有工具提示的开关按钮组

布尔选项​

如果你想要一个简单的布尔开关按钮组，带有"是"和"否"选项，可以使用 boolean() 方法：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()

选项会自动设置颜色和图标，但你可以使用 colors() 或 icons() 覆盖它们。

布尔开关按钮组

要自定义"是"标签，可以使用 boolean() 方法的 trueLabel 参数：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean(trueLabel: 'Absolutely!')

要自定义"否"标签，可以使用 boolean() 方法的 falseLabel 参数：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean(falseLabel: 'Not at all!')

将选项内联排列​

你可能希望将按钮 inline() 内联显示：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->inline()

内联开关按钮组

你也可以传递一个布尔值来控制按钮是否应该内联：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->inline(FeatureFlag::active())
提示

inline() 方法除了接受静态值外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

分组选项按钮​

你可能希望使用 grouped() 方法将选项按钮分组在一起，使它们更紧凑。这也使它们水平内联显示：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->grouped()

分组开关按钮组

你也可以传递一个布尔值来控制按钮是否应该分组：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->grouped(FeatureFlag::active())
提示

grouped() 方法除了接受静态值外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

选择多个按钮​

ToggleButtons 组件上的 multiple() 方法允许你从选项列表中选择多个值：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->multiple()
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])

选中多个开关按钮

这些选项以 JSON 格式返回。如果你使用 Eloquent 保存它们，请确保为模型属性添加 array 类型转换：

use Illuminate\Database\Eloquent\Model;

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

    // ...
}

你也可以传递一个布尔值来控制按钮是否应该允许多选：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->multiple(FeatureFlag::active())
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])
提示

multiple() 方法除了接受静态值外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

将选项拆分为列​

你可以使用 columns() 方法将选项拆分为列：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->options([
        // ...
    ])
    ->columns(2)
提示

columns() 方法除了接受静态值外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

2 列开关按钮组

该方法接受与网格的 columns() 方法相同的选项。这允许你在不同断点处响应式地自定义列数。

设置网格方向​

默认情况下，当你将按钮排列成列时，它们会按垂直顺序列出。如果你想水平排列，可以使用 gridDirection(GridDirection::Row) 方法：

use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Enums\GridDirection;

ToggleButtons::make('technologies')
    ->options([
        // ...
    ])
    ->columns(2)
    ->gridDirection(GridDirection::Row)
提示

gridDirection() 方法除了接受静态值外，还接受一个函数来动态计算。你可以将各种工具注入到函数参数中。

2 行开关按钮组

禁用特定选项​

你可以使用 disableOptionWhen() 方法禁用特定选项。它接受一个闭包，你可以在其中检查具有特定 $value 的选项是否应该被禁用：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->disableOptionWhen(fn (string $value): bool => $value === 'published')
提示

你可以将各种工具注入到函数参数中。

禁用选项的开关按钮组

如果你想获取未被禁用的选项（例如用于验证），可以使用 getEnabledOptions()：

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->disableOptionWhen(fn (string $value): bool => $value === 'published')
    ->in(fn (ToggleButtons $component): array => array_keys($component->getEnabledOptions()))

有关 in() 函数的更多信息，请参阅验证文档。