开关设置的开启或关闭。适用于启用或禁用功能等二进制选项。
<flux:field variant="inline"> <flux:label>Enable notifications</flux:label> <flux:switch wire:model.live="notifications" /> <flux:error name="notifications" /></flux:field>在字段集中组织相关的开关。
<flux:fieldset> <flux:legend>Email notifications</flux:legend> <div class="space-y-4"> <flux:switch wire:model.live="communication" label="Communication emails" description="Receive emails about your account activity." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="marketing" label="Marketing emails" description="Receive emails about new products, features, and more." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="social" label="Social emails" description="Receive emails for friend requests, follows, and more." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="security" label="Security emails" description="Receive emails about your account activity and security." /> </div></flux:fieldset>使用 align 属性为更紧凑的布局左对齐开关。
<flux:fieldset> <flux:legend>Email notifications</flux:legend> <div class="space-y-3"> <flux:switch label="Communication emails" align="left" /> <flux:switch label="Marketing emails" align="left" /> <flux:switch label="Social emails" align="left" /> <flux:switch label="Security emails" align="left" /> </div></flux:fieldset>|
属性
|
描述
|
|---|---|
| wire:model |
将开关绑定到 Livewire 属性。查看 wire:model 文档了解更多信息。
|
| label |
|
| description |
|
| align |
开关相对于其标签的对齐方式。选项：right|start（默认）、left|end。
|
| disabled |
阻止用户与开关的交互。
|
|
属性
|
描述
|
|---|---|
| data-flux-switch |
应用到根元素用于样式设置和标识。
|
| data-checked |
当开关处于"开启"状态时应用。
|