HxChipList #

Presents a list of chips as badges.
Usually being 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.
OnChipRemoveClick	`EventCallback<ChipItem>`	Called when 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).
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 you own).
ResetButtonText	`string`	Text of the reset button.
Settings	`ChipListSettings`	Set of settings to be applied to the component instance (overrides `HxChipList.Defaults`, overridden by individual parameters).
ShowResetButton	`bool?`	Enables/disables the reset button. Default is `false` (can be changed with `HxChipList.Defaults.ShowResetButton`.

Static properties #

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

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`