LIstGroup

Angular Bootstrap List group is a flexible component which displays not only simple list of elements but complex custom content.

Examples

Default LIstGroup example.

html

<CDBListGroup style="width: 30rem">
    <CDBListGroupItem>List Group </CDBListGroupItem>
    <CDBListGroupItem>List Group</CDBListGroupItem>
    <CDBListGroupItem>List Group</CDBListGroupItem>
    <CDBListGroupItem>List Group</CDBListGroupItem>
    <CDBListGroupItem>List Group</CDBListGroupItem>
    <CDBListGroupItem>List Group</CDBListGroupItem>
</CDBListGroup>

List Group as Link

html

<CDBListGroup style="width: 30rem">
    <CDBListGroupItem href="/" [active]=true>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem href="/" [hover]=true>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem href="/" [hover]=true>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem href="/" [hover]=true>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem href="/" [hover]=true>
        List Group Link
    </CDBListGroupItem>
    <CDBListGroupItem href="/" [hover]=true>
        List Group
    </CDBListGroupItem>
</CDBListGroup>

Label

html

<CDBListGroup style="width: 30rem">
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group <CDBBadge color="primary">19</CDBBadge>
    </CDBListGroupItem>
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group
        <CDBBadge color="secondary">19</CDBBadge>
    </CDBListGroupItem>
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group
        <CDBBadge color="success">19</CDBBadge>
    </CDBListGroupItem>
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group
        <CDBBadge color="danger">19</CDBBadge>
    </CDBListGroupItem>
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group<CDBBadge color="info">19</CDBBadge>
    </CDBListGroupItem>
    <CDBListGroupItem class="d-flex justify-content-between align-items-center">
        List Group<CDBBadge color="warning">19</CDBBadge>
    </CDBListGroupItem>
</CDBListGroup>

Color List Group

html

<CDBListGroup style="width: 30rem">
    <CDBListGroupItem color="primary">List Group </CDBListGroupItem>
    <CDBListGroupItem color="secondary">List Group</CDBListGroupItem>
    <CDBListGroupItem color="success">List Group</CDBListGroupItem>
    <CDBListGroupItem color="danger">List Group</CDBListGroupItem>
    <CDBListGroupItem color="info">List Group Link</CDBListGroupItem>
    <CDBListGroupItem color="warning">List Group</CDBListGroupItem>
</CDBListGroup>

Icons

html

<CDBListGroup style="width: 30rem">
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" size="2x" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" size="2x" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" size="2x" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" size="2x" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
    <CDBListGroupItem>
        <CDBIcon [fab]=true icon="facebook" size="2x" class="mr-3"></CDBIcon>
        List Group
    </CDBListGroupItem>
</CDBListGroup>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast ListGroup Bootstrap Modules used

import {ListgroupModule } from 'cdbangular';

API Reference: Contrast ListGroup Inputs

The table below shows the possible input of the ListGroup component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"

API Reference: Contrast LIstGroupItem Properties

The table below shows the configuration options of the CDBLIstGroupItem component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
active	Boolean	false	Adds default active state to item	active=true
color	String		Changes Item background and text color, accepts `["primary", "default", "secondary", "success", "dark", "danger", "info", "warning", "white" ]`	color="primary"
disable	Boolean	false	Disables item from being clicked	disabled=true
hover	Boolean	false	Adds hover effect (slightly background color change)	hover=true

Switch

Stepper