171 lines
3.8 KiB
Markdown
171 lines
3.8 KiB
Markdown
# SbChip
|
|
|
|
A compact element for displaying tags, categories, or actionable items. Chips can be static, clickable, or removable, with support for icons and various visual styles.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Variant | SbChipVariant | Filled | Visual style (Filled, Outlined) |
|
|
| Size | SbSize | Md | Chip size (Sm, Md, Lg) |
|
|
| Color | SbColor | Default | Color theme |
|
|
| Disabled | bool | false | Whether the chip is disabled |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| OnClick | EventCallback<MouseEventArgs> | Fired when chip is clicked (makes chip interactive) |
|
|
| OnRemove | EventCallback | Fired when remove button is clicked (shows remove button) |
|
|
|
|
## Templates / Slots
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment? | Label content of the chip |
|
|
| StartIcon | RenderFragment? | Icon displayed before the label |
|
|
|
|
### Template Usage
|
|
|
|
#### Basic
|
|
|
|
```razor
|
|
<SbChip>Label</SbChip>
|
|
```
|
|
|
|
#### With Start Icon
|
|
|
|
```razor
|
|
<SbChip>
|
|
<StartIcon>
|
|
<SbIcon Name="tag" Size="SbSize.Sm" />
|
|
</StartIcon>
|
|
<ChildContent>Category</ChildContent>
|
|
</SbChip>
|
|
```
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-chip` - Base class
|
|
- `sb-chip--filled` - Filled variant
|
|
- `sb-chip--outlined` - Outlined variant
|
|
- `sb-chip--sm` - Small size
|
|
- `sb-chip--md` - Medium size
|
|
- `sb-chip--lg` - Large size
|
|
- `sb-chip--primary` - Primary color
|
|
- `sb-chip--secondary` - Secondary color
|
|
- `sb-chip--success` - Success color
|
|
- `sb-chip--warning` - Warning color
|
|
- `sb-chip--danger` - Danger color
|
|
- `sb-chip--clickable` - Applied when OnClick is provided
|
|
- `sb-chip--disabled` - Disabled state
|
|
- `sb-chip__icon` - Icon container
|
|
- `sb-chip__label` - Label container
|
|
- `sb-chip__remove` - Remove button
|
|
|
|
## Accessibility
|
|
|
|
- Renders as `<button>` when clickable, `<span>` otherwise
|
|
- Remove button has `aria-label="Remove"`
|
|
- Disabled state is reflected in the DOM
|
|
|
|
## Examples
|
|
|
|
### Basic Chips
|
|
|
|
```razor
|
|
<SbChip>Default</SbChip>
|
|
<SbChip Color="SbColor.Primary">Primary</SbChip>
|
|
<SbChip Color="SbColor.Success">Success</SbChip>
|
|
<SbChip Color="SbColor.Warning">Warning</SbChip>
|
|
<SbChip Color="SbColor.Danger">Danger</SbChip>
|
|
```
|
|
|
|
### Variants
|
|
|
|
```razor
|
|
<SbChip Variant="SbChipVariant.Filled" Color="SbColor.Primary">Filled</SbChip>
|
|
<SbChip Variant="SbChipVariant.Outlined" Color="SbColor.Primary">Outlined</SbChip>
|
|
```
|
|
|
|
### Sizes
|
|
|
|
```razor
|
|
<SbChip Size="SbSize.Sm">Small</SbChip>
|
|
<SbChip Size="SbSize.Md">Medium</SbChip>
|
|
<SbChip Size="SbSize.Lg">Large</SbChip>
|
|
```
|
|
|
|
### Clickable Chip
|
|
|
|
```razor
|
|
<SbChip OnClick="HandleClick" Color="SbColor.Primary">
|
|
Click Me
|
|
</SbChip>
|
|
|
|
@code {
|
|
private void HandleClick(MouseEventArgs args)
|
|
{
|
|
Console.WriteLine("Chip clicked!");
|
|
}
|
|
}
|
|
```
|
|
|
|
### Removable Chip
|
|
|
|
```razor
|
|
<SbChip OnRemove="HandleRemove" Color="SbColor.Primary">
|
|
Removable
|
|
</SbChip>
|
|
|
|
@code {
|
|
private void HandleRemove()
|
|
{
|
|
Console.WriteLine("Chip removed!");
|
|
}
|
|
}
|
|
```
|
|
|
|
### With Icon
|
|
|
|
```razor
|
|
<SbChip Color="SbColor.Primary">
|
|
<StartIcon>
|
|
<SbIcon Name="user" Size="SbSize.Sm" />
|
|
</StartIcon>
|
|
<ChildContent>John Doe</ChildContent>
|
|
</SbChip>
|
|
```
|
|
|
|
### Tag List Example
|
|
|
|
```razor
|
|
@foreach (var tag in tags)
|
|
{
|
|
<SbChip Color="SbColor.Primary"
|
|
Variant="SbChipVariant.Outlined"
|
|
OnRemove="() => RemoveTag(tag)">
|
|
@tag
|
|
</SbChip>
|
|
}
|
|
|
|
@code {
|
|
private List<string> tags = new() { "Blazor", "C#", ".NET" };
|
|
|
|
private void RemoveTag(string tag)
|
|
{
|
|
tags.Remove(tag);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
```razor
|
|
<SbChip Disabled="true">Disabled</SbChip>
|
|
<SbChip Disabled="true" OnClick="HandleClick">Can't Click</SbChip>
|
|
```
|