跳到主要内容
版本:3.x

Toggle

概述

Toogle 组件,类似于 Checkbox,允许你使用布尔值。

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
Toggle

如果你使用 Eloquent 保存该布尔值,请确保该模型属性中添加了 boolean cast

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
protected $casts = [
'is_admin' => 'boolean',
];

// ...
}

添加图标到 Toogle 按钮

Toogle 可以使用图标,来展示按钮的 "on" 和 "off" 状态。要将图标添加到 "on" 状态,请使用 onIcon() 方法。要将图标添加到 "off" 状态,请使用 offIcon() 方法:

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
->onIcon('heroicon-m-bolt')
->offIcon('heroicon-m-user')
Toggle icons

自定义 Toogle 按钮的颜色

你也可以自定义表示 Toogle 的 "on" 或 "off" 状态所对应的颜色。可以是 dangergrayinfoprimarysuccesswarning。要将颜色添加到 "on" 状态,请使用 onColor() 方法。要将颜色添加到 "off" 状态,请使用 offColor() 方法:

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
->onColor('success')
->offColor('danger')
Toggle off color
Toggle on color

标签置于其上

Toogle 字段有两个布局模式,行内或者堆叠。默认情况下,使用的是行内模式。

使用行内模式时,标签与之相邻:

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
->inline()
Toggle with its label inline

使用堆叠模式时,标签在其之上:

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
->inline(false)
Toggle with its label above

Toggle 验证

除了验证页面中罗列的规则之外,还有一些特别针对 Toogle 字段的其他规则。

Accepted 验证

使用 accepted() 方法,你可以确保 Toogle 在 on 状态:

use Filament\Forms\Components\Toggle;

Toggle::make('terms_of_service')
->accepted()

Declined 验证

使用 declined() 方法,你可以确保 Toogle 在 off 状态:

use Filament\Forms\Components\Toggle;

Toggle::make('is_under_18')
->declined()