HxChipList
Presents a list of chips as badges.
Usualy being used to present filter-criteria gathered by HxFilterForm.
onetwothree
<HxChipList Chips="@chips" />
@code
{
private ChipItem[] chips =
{
new() { ChipTemplate = GetRenderFragment("one"), Removable = true },
new() { ChipTemplate = GetRenderFragment("two") },
new() { ChipTemplate = GetRenderFragment("three") }
};
private static RenderFragment GetRenderFragment(string text) => builder =>
{
builder.AddContent(1, text);
};
}API
Parameters
| Name | Type | Description |
|---|---|---|
| ChipBadgeSettings | BadgeSettings |
Settings for the HxBadge used to render chips. |
| Chips | IEnumerable<ChipItem> |
Chips to be presented. |
| CssClass | string |
Additional CSS class. |
| OnChipRemoveClick | EventCallback<ChipItem> |
Called when chip remove button is clicked. |
| Settings | ChipListSettings |
Set of settings to be applied to the component instance (overrides HxChipList.Defaults, overriden by individual parameters). |
Static properties
| Property | Type | Description |
|---|---|---|
| Defaults | ChipListSettings |
Application-wide defaults for the HxChipList. |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --hx-chiplist-chip-margin | Gap between chips. | .25rem |
| --hx-chiplist-chip-remove-btn-margin | Margin of chip remove button. | 0 0 0 .25rem |
| --hx-chiplist-chip-remove-btn-margin | Opacity of chip remove button. | .5 |
| --hx-chiplist-chip-label-font-weight | Font weight of chip label. | 400 |
| --hx-chiplist-chip-label-margin | Margin of chip label. | 400 |
| --hx-chiplist-chip-label-opacity | Opacity of chip label. | .5 |