147 lines
4.0 KiB
Markdown
147 lines
4.0 KiB
Markdown
# SbSwitch
|
|
|
|
A toggle switch component for boolean on/off states. More visually distinct than a checkbox for settings and preferences.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Value | bool | false | Switch on/off state (two-way bindable) |
|
|
| ValueChanged | EventCallback\<bool\> | - | Callback when value changes |
|
|
| Label | string? | null | Switch label text |
|
|
| Disabled | bool | false | Whether the switch is disabled |
|
|
| Color | SbColor | SbColor.Primary | Switch accent color when on |
|
|
| Size | SbSize | SbSize.Md | Switch size (Sm, Md, Lg) |
|
|
| HelperText | string? | null | Helper text shown below the label |
|
|
| Id | string? | null | Element ID for the input |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes (CaptureUnmatchedValues) |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| ValueChanged | EventCallback\<bool\> | Fired when the switch value changes |
|
|
|
|
## Templates / Slots (RenderFragments)
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment | Custom label content (takes precedence over Label parameter) |
|
|
|
|
### Template Usage Examples
|
|
|
|
#### Custom Label
|
|
|
|
```razor
|
|
<SbSwitch @bind-Value="darkMode">
|
|
<SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
|
|
<SbIcon Name="moon" Size="SbSize.Sm" />
|
|
<span>Dark Mode</span>
|
|
</SbStack>
|
|
</SbSwitch>
|
|
```
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-switch` - Base class
|
|
- `sb-switch--{color}` - Color variant (primary, success, warning, danger, etc.)
|
|
- `sb-switch--{size}` - Size variant (sm, md, lg)
|
|
- `sb-switch--checked` - On state
|
|
- `sb-switch--disabled` - Disabled state
|
|
- `sb-switch__input-wrapper` - Wrapper around input
|
|
- `sb-switch__input` - Native input
|
|
- `sb-switch__track` - Background track
|
|
- `sb-switch__thumb` - Sliding thumb
|
|
- `sb-switch__text` - Wrapper for label and helper
|
|
- `sb-switch__label` - Label text
|
|
- `sb-switch__helper` - Helper text
|
|
|
|
## Accessibility
|
|
|
|
- Uses native `<input type="checkbox">` with `role="switch"`
|
|
- `aria-checked` indicates current state
|
|
- Keyboard accessible (Space to toggle)
|
|
- Label wraps input for expanded click area
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbSwitch @bind-Value="isEnabled" Label="Enable feature" />
|
|
```
|
|
|
|
### Color Variants
|
|
|
|
```razor
|
|
<SbSwitch @bind-Value="setting1" Label="Primary" Color="SbColor.Primary" />
|
|
<SbSwitch @bind-Value="setting2" Label="Success" Color="SbColor.Success" />
|
|
<SbSwitch @bind-Value="setting3" Label="Warning" Color="SbColor.Warning" />
|
|
```
|
|
|
|
### Settings Panel
|
|
|
|
```razor
|
|
<SbCard>
|
|
<Header>
|
|
<SbHeading Level="3">Notifications</SbHeading>
|
|
</Header>
|
|
<SbStack Gap="4">
|
|
<SbSwitch @bind-Value="emailNotifications" Label="Email notifications" />
|
|
<SbSwitch @bind-Value="pushNotifications" Label="Push notifications" />
|
|
<SbSwitch @bind-Value="smsNotifications" Label="SMS notifications" />
|
|
</SbStack>
|
|
</SbCard>
|
|
```
|
|
|
|
### Disabled States
|
|
|
|
```razor
|
|
<SbSwitch Value="true" Disabled="true" Label="Always on (locked)" />
|
|
<SbSwitch Value="false" Disabled="true" Label="Always off (locked)" />
|
|
```
|
|
|
|
### With Rich Label
|
|
|
|
```razor
|
|
<SbSwitch @bind-Value="autoSave">
|
|
<div>
|
|
<strong>Auto-save</strong>
|
|
<SbText Size="SbTextSize.Sm" Color="SbColor.Muted">
|
|
Automatically save changes every 5 minutes
|
|
</SbText>
|
|
</div>
|
|
</SbSwitch>
|
|
```
|
|
|
|
### Controlled Switch
|
|
|
|
```razor
|
|
<SbSwitch Value="@isPublic"
|
|
ValueChanged="OnPublicChanged"
|
|
Label="Make profile public" />
|
|
|
|
@code {
|
|
private bool isPublic;
|
|
|
|
private async Task OnPublicChanged(bool value)
|
|
{
|
|
if (value)
|
|
{
|
|
var confirmed = await DialogService.Confirm(
|
|
"Making your profile public will allow anyone to view it.");
|
|
if (confirmed)
|
|
{
|
|
isPublic = true;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
isPublic = false;
|
|
}
|
|
}
|
|
}
|
|
```
|