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>

  • Icon 20
  • Badge info

5 - Documentation / Reference

Further reading and or related documentation