ComboStrap UI - List

1 - About

A List is a component that lay out continuous, vertical lines where each line is composed of:

  1. [Optional] a visual (icon or image)
  2. a text
  3. [Optional] and a meta information.

Since version 1.6

3 - Syntax

list is a HTML superset component and follows the following syntax


<list>
    <li>
        Text
    </li>
</list>

where:

  • list defines a list
  • li defines a list item.

For the Geek

  • list translated to an ul html tag
  • li is translated to a flex li html tag.

The list implementations follows the Material design list with one-item type and not the Bootstrap list-group because they don't offer any visual supports.

4 - Example

4.1 - Icon and badge

The List component is aware of:

and applied style accordingly:

  • an icon gets by default a margin of two with the text.
  • the badge is pushed to the right side.
  • a link get the style attribute of its parent

<list width="300px" color="info">
    <li>
        <icon name="folder"/>
        [[icon|Icon]]
        <badge>20</badge>
    </li>
    <li>
        <icon name="folder"/>
        [[badge|Badge]]
        <badge>info</badge>
    </li>
</list>

5 - Documentation / Reference

Further reading and or related documentation

Powered by ComboStrap