Bootstrap 5 List group component.
List groups are a flexible and powerful component for displaying a series of content.
<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>
Set Active="true"
to the list-group item to indicate the current active selection.
Set Enabled="false"
to the list-group item to make it appear disabled.
Use <HxListGroupItemNavLink />
component to create a link item in list-group.
Add OnClick
parameter to make the list-group item behave like a button.
Last button clicked:
Use flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., HxCard).
Add the Numbered="true"
parameter to opt into numbered list group items.
These work great with custom content as well.
Use Horizontal
parameter to change the layout of the list group items from vertical to horizontal (incl. responsive breakpoint).
Use Color
parameter to set contextual color for list-group item.
Add badges to any list group item to show unread counts, activity, and more.
Add nearly any component or element within.
Some placeholder content in a paragraph.
And some small print.Some placeholder content in a paragraph.
And some muted small print.Some placeholder content in a paragraph.
And some muted small print.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. |
Item for HxListGroup
.
Name | Type | Description |
---|---|---|
Active | bool |
Indicates the current 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 to false .
Default is true . |
OnClick | EventCallback<MouseEventArgs> |
An event that is fired when the HxListGroupItem is clicked. |