ListGroup

列表

基本用法

flush

  • Dapibus ac facilisis in
  • This is a primary list group item
    •
  • Dapibus ac facilisis in
  • This is a primary list group item
    •  
    1
    2
    3
    4
    5
    6
    7
    8
    <db-list-group widgetId="not-flush">
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
    </db-list-group>
    <db-list-group widgetId="flush" flush="true">
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
    </db-list-group>

    orientation

  • orientation is vertical
  • This is a primary list group item
    •
  • orientation is horizontal
  • This is a inline list group item
    •  
    1
    2
    3
    4
    5
    6
    7
    8
    <db-list-group widgetId="vertical">
      <li class="list-group-item">orientation is vertical</li>
      <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
    </db-list-group>
    <db-list-group widgetId="horizontal" orientation="horizontal">
      <li class="list-inline-item">orientation is horizontal</li>
      <li class="list-inline-item">This is a inline list group item</li>
    </db-list-group>

    通用属性

    1. Spacing

    属性

    名称 显示名 默认值 可选值 值类型
    widgetId 标识 string
    flush 无边框 false true, false boolean
    orientation 布局方向 vertical horizontal, vertical string
    1. ListGroup下支持放Button、Link和ListItem部件
    2. ListGroup的布局方向选择了horizontal方向，则只支持ListItem部件，Button、Link部件必须置于ListItem部件下面