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

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

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
14
Subheading
Cras justo odio
14
Subheading
Cras justo odio
14

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