HxListGroup #

Bootstrap 5 List group component.
List groups are a flexible and powerful component for displaying a series of content.

Basic usage #

An item

A second item

A third item

A fourth item

And a fifth one

<HxListGroup>
    <HxListGroupItem>An item</HxListGroupItem>
    <HxListGroupItem>A second item</HxListGroupItem>
    <HxListGroupItem>A third item</HxListGroupItem>
    <HxListGroupItem>A fourth item</HxListGroupItem>
    <HxListGroupItem>And a fifth one</HxListGroupItem>
</HxListGroup>

Active and disabled items #

Set Active="true" to indicate the currently selected list-group item. Set Enabled="false" to make the list-group item appear disabled.

An active item

A second item

A third item

A fourth item

A disabled item

Links #

Use the <HxListGroupItemNavLink /> component to create a link item in the list-group.

The current link item A second link item A third link item A fourth link item A disabled link item

Buttons #

Add the OnClick parameter to make the list-group item behave like a button.

The current button

A second item

A third item

A fourth item

And a fifth one

Last button clicked:

Flush #

Use flush to remove some borders and rounded corners, rendering the list-group items edge-to-edge in a parent container (e.g., HxCard).

An item

A second item

A third item

A fourth item

And a fifth one

Numbered #

Add the Numbered="true" parameter to enable numbered list group items.

An item

A second item

A third item

A fourth item

And a fifth one

These also work well with custom content.

Subheading

Cras justo odio

Subheading

Cras justo odio

Subheading

Cras justo odio

Horizontal #

Use the Horizontal parameter to change the layout of the list group items from vertical to horizontal, including the responsive breakpoint.

An item

A second item

A third item

Colors #

Use the Color parameter to set the contextual color for the list-group item.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Last click color:

With badges #

Add badges to any list-group item to show unread counts, activity, and more.

A list item 14

A second item 2

A third item 1

Custom content #

Add nearly any component or element within.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

API #

Parameters #

Name	Type	Description
AdditionalAttributes	`Dictionary<string, object>`	Additional attributes to be splatted onto an underlying `HxListGroup` component.
ChildContent	`RenderFragment`	Content of the list group component.
CssClass	`string`	Additional CSS class.
Flush	`bool`	If set to `true`, removes borders and rounded corners to render list group items edge-to-edge.
Horizontal	`ListGroupHorizontal`	Changes the layout of the list group items from vertical to horizontal. Cannot be combined with `Flush`.
Numbered	`bool`	Set to `true` to opt into numbered list group items. The list group changes from an unordered list to an ordered list.

HxListGroupItem #

Item for HxListGroup.

API #

Parameters #

Name	Type	Description
Active	`bool`	Indicates the currently active selection.
ChildContent	`RenderFragment`	Content of the item.
Color	`ThemeColor?`	Color.
CssClass	`string`	Additional CSS class.
Enabled	`bool`	Make the item appear disabled by setting it to `false`. The default value is `true`.

Event callbacks #

Name	Type	Description
OnClick	`EventCallback<MouseEventArgs>`	An event that is fired when the `HxListGroupItem` is clicked.