HxChipList #

Presents a list of chips as badges.
Usually used to present filter criteria gathered by HxFilterForm.

Basic usage #

State: ActiveName: PeterCompany: HAVIT
<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);
	};
}

Reset button #

By setting ShowResetButton="true", you can enable the Reset button (text customizable with ResetButtonText). When the button is clicked, the OnReset callback is invoked.

State: ActiveName: PeterCompany: HAVITReset

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.
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).

Event callbacks #

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).

Static properties #

Property Type Description
Defaults ChipListSettings Application-wide defaults for the HxChipList component.

CSS variables #

Name Description Default
--hx-chip-list-chip-margin Gap between chips. .25rem
--hx-chip-list-chip-remove-btn-margin Margin of chip remove button. 0 0 0 .25rem
--hx-chip-list-chip-remove-btn-margin Opacity of chip remove button. .5
--hx-chip-list-chip-label-font-weight Font weight of chip label. 400
--hx-chip-list-chip-label-margin Margin of chip label. 400
--hx-chip-list-chip-label-opacity Opacity of chip label. .5
An unhandled error has occurred. Reload 🗙