Formatting: List

About

Formatting List is an HTML format and configuration that can be used to display lists in a more appealing way - (Demo).

Specification

Configuration

Description

marker-icon

Value	Preview
bullet	Item 1 Item 2
arrow	Item 1 Item 2
plus	Item 1 Item 2
minus	Item 1 Item 2
check	Item 1 Item 2
x	Item 1 Item 2

NOTE:
The marker-icon configuration can only be added to UL (Unordered List) elements. For OL (Ordered List) elements, the icon will always be a Number.

marker-box

Value	Preview
none	Item 1 Item 2
square	Item 1 Item 2
circle	Item 1 Item 2

NOTE:
The marker-box configuration is only available for marker-icon options other than bullet.

marker-skin

This configuration is used for the icon color. By default, each icon has a different skin. You can change this default configuration via the marker-skin configuration. Choose one of the available skins from the Skin List.

formatting

By default, the system will process all OL and UL elements that placed at supported section (in data specifiction. By setting the value to no in this configuration, the corresponding OL and UL elements will not be processed with formatting (they will use the browser's default style).

Usage

UL element (list with icon)

      
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Item 1
Item 2
Item 3

Note: In the HTML above, no configurations have been added. All configurations will use Default Values.

Add the desired configuration by including attributes

data-configuration-name='Value' in the UL element.

Example:

      
<ul data-marker-icon='check' data-marker-box='circle'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Item 1
Item 2
Item 3

By default, each icon skin is defined differently. You can change the default icon color through the marker-skin configuration.

      
<b>Custom skin without marker-box</b>
<ul data-marker-icon='check' data-marker-box='none' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<br/>
<br/>
<b>Custom skin with marker-box</b>
<ul data-marker-icon='check' data-marker-box='circle' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Custom skin without marker-box

Item 1
Item 2
Item 3

Custom skin with marker-box

Item 1
Item 2
Item 3

OL element (numbered list)
The procedure for adding configurations is the same as for the UL element above. However, for the OL element, the marker-icon configuration is not available. The marker for OL elements will always be Number.
```
      
<ol data-marker-box='circle' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
      
      
```
1. Item 1
2. Item 2
3. Item 3