HxChipList #

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

Basic usage #

<HxChipList Chips="@chips" />

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


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 🗙