List Groups

Introduction

abp-list-group is the main container for list group content.

Basic usage:

<abp-list-group>
    <abp-list-group-item>Cras justo odio</abp-list-group-item>
    <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
    <abp-list-group-item>Morbi leo risus</abp-list-group-item>
    <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
</abp-list-group>

Demo

See the list groups demo page to see it in action.

Attributes

flush

A value indicates abp-list-group items to remove some borders and rounded corners to render list group items edge-to-edge in a parent container. Should be one of the following values:

  • false (default value)
  • true

active

A value indicates if an abp-list-group-item to be active. Should be one of the following values:

  • false (default value)
  • true

disabled

A value indicates if an abp-list-group-item to be disabled. Should be one of the following values:

  • false (default value)
  • true

href

A value indicates if an abp-list-group-item has a link. Should be a string link value.

type

A value indicates an abp-list-group-item style class with a stateful background and color. Should be one of the following values:

  • Default (default value)
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • Link

Additional content

abp-list-group-item can also contain additional HTML elements like spans.

Example:

<abp-list-group>
    <abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item>
    <abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item>
    <abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item>
</abp-list-group>

Contributors


Last updated: March 20, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More