Presents a list of chips as badges.
Usually used to present filter criteria gathered by HxFilterForm.
<HxChipList Chips="@chips" />
@code
{
private ChipItem[] chips =
{
new() { ChipTemplate = GetChipRenderFragment("State", "Active") },
new() { ChipTemplate = GetChipRenderFragment("Name", "Peter"), Removable = true },
new() { ChipTemplate = GetChipRenderFragment("Company", "HAVIT"), Removable = true },
};
private static RenderFragment GetChipRenderFragment(string label, string value) => builder =>
{
// build your HTML markup to render chip here (label + value is just an example)
builder.OpenElement(0, "span");
builder.AddAttribute(1, "class", "hx-chip-list-label");
builder.AddContent(2, label);
builder.AddContent(3, ": ");
builder.CloseElement();
builder.AddContent(4, value);
};
}By setting ShowResetButton="true", you can enable the Reset button (text customizable with ResetButtonText). When the button is clicked, the OnReset callback is invoked.
| 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. |
| ResetButtonTemplate | RenderFragment |
Template for the reset button.
If used, the ResetButtonText is ignored and the OnResetClick callback is not triggered (you are expected to wire the reset logic on your own). |
| ResetButtonText | string |
Text of the reset button. |
| Settings | ChipListSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| ShowResetButton | bool? |
Enables or disables the reset button.
The default is false (can be changed with HxChipList.Defaults.ShowResetButton). |
| Name | Type | Description |
|---|---|---|
| OnChipRemoveClick | EventCallback<ChipItem> |
Called when the chip remove button is clicked. |
| OnResetClick | EventCallback<ChipItem> |
Called when the reset button is clicked (when using the ready-made reset button, not the ResetButtonTemplate where you are expected to wire the event on your own). |
| Property | Type | Description |
|---|---|---|
| Defaults | ChipListSettings |
Application-wide defaults for the HxChipList component. |
| Name | Description | Default |
|---|---|---|
| --hx-chip-list-chip-margin | Gap between chips. | .25rem |
| --hx-chip-list-chip-gap | Gap between chip content. | .25rem |
| --hx-chip-list-chip-remove-btn-margin | Initial opacity of chip remove button. | .5 |
| --hx-chip-list-chip-label-font-weight | Font weight of chip label. | 400 |
| --hx-chip-list-chip-label-opacity | Opacity of chip label. | .5 |
| --hx-chip-list-chip-reset-btn-padding | Reset button padding. | .45em .75em |