Presents a list of chips as badges.
Usualy being used to present filter-criteria gathered by HxFilterForm
.
<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);
};
}
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). |
Property | Type | Description |
---|---|---|
Defaults | ChipListSettings |
Application-wide defaults for the HxChipList . |
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 |