ListGroup

ListGroup Component

The ListGroup component is used to display a series of content in a powerful and flexible way.

Inheritance

ListGroup : BootstrapComponentBase

Parameters

Name	Type	Description
IsFlush	bool	Removes some borders and rounder corners to render list group items edge-to-edge in a parent container.
IsHorizontal	bool	Changes the layout of list group items from vertical to horizontal across all breakpoints

Related Components

The following components are typically used with the ListGroup component.

• ListGroupItem
• ListGroupAnchor
• ListGroupButton

Examples

The samples below show you how to use the ListGroup component.

Simple list group

The simplest way to use the list group.

<ListGroup>
    <ListGroupItem>Item #1</ListGroupItem>
    <ListGroupItem>Item #2</ListGroupItem>
    <ListGroupItem>Item #3</ListGroupItem>
</ListGroup>

Different types of items

You can have different types of items in a list group.

<ListGroup>
    <ListGroupItem>Basic list item</ListGroupItem>
    <ListGroupAnchor Url="..." Color="NamedColor.Success">
        A link item
    </ListGroupAnchor>
    <ListGroupButton
        Color="NamedColor.Primary"
        IsOutline="true"
        OnClicked="() => { ... }">
        A button
    </ListGroupButton>
</ListGroup>

Custom Content

You can have pretty much anything as content in your list group items.

<ListGroup>
    <ListGroupItem>
        <Card
            TextColor="NamedColor.White"
            BackgroundColor="NamedColor.Dark"
            Title="Image Overlay"
            Text="A card with an image in a list group item"
            ImageUrl="..."
            ImagePosition="CardImagePosition.Overlay"></Card>
    </ListGroupItem>
</ListGroup>