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