HxChipList #

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

Basic usage #

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`