HxChipList

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

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
An unhandled error has occurred. Reload 🗙