列表组

简介

abp-list-group 是列表组内容的主要容器。

基础用法：

<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>

演示

查看列表组演示页面以实际体验效果。

属性

flush

该属性表示 abp-list-group 项是否移除部分边框和圆角，使列表组项在父容器中边对边渲染。应为以下值之一：

false（默认值）
true

active

该属性表示 abp-list-group-item 是否处于激活状态。应为以下值之一：

false（默认值）
true

disabled

该属性表示 abp-list-group-item 是否处于禁用状态。应为以下值之一：

false（默认值）
true

href

该属性表示 abp-list-group-item 是否包含链接。应为字符串链接值。

type

该属性表示 abp-list-group-item 的样式类，具有状态相关的背景和颜色。应为以下值之一：

Default（默认值）
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

附加内容

abp-list-group-item 还可以包含其他 HTML 元素，如 span 标签。

示例：

<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>

列表组

简介

演示