wiz-ref-list

Use this component to display a vertically ordered list with optional markers for each item.

Key features:

• Customizable items
  Each item can include a marker (mark) and corresponding text (text)
• Marker visibility
  Options to show or hide markers using the isMark property
• Direction control
  Supports both left-to-right (LTR) and right-to-left (RTL) text direction for localization
• Spacing
  Flexible control over spacing between list items
• Reusable template
  You can customize default styles and values with the itemTemplate property

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

Markup:

<wiz-ref-list
  :items="[
    {
      mark: '<div style="line-height: 22px;text-align: left;"><span style="color: #519643; font-size: 20px;">•</span></div>',
      text: '<div style="line-height: 20px;text-align: left;">Item 1 description</div>',
    },
    {
      mark: '<div style="line-height: 22px;text-align: left;"><span style="color: #519643; font-size: 20px;">•</span></div>',
      text: '<div style="line-height: 20px;text-align: left;">Item 2 description</div>',
    },
  ]"
  :isMark="true"
  directionClass="left-to-right"
  :indent="20"
/>

Localization:

<i18n>
    {
        "en": {
              "mark1": "•",
              "mark2": "•",
              "mark3": "•",
              "text1": "Article 1 »",
              "text2": "Article 2 »",
              "text3": "Article 3 »"
        }
    }
</i18n>

Customization

Markers can be customized for each list item:

<wiz-ref-list
  :items="[
    {
      mark: '<div style="line-height: 22px;text-align: left;"><span style="color: #e74c3c; font-size: 20px;">*</span></div>',
      text: '<div style="line-height: 20px;text-align: left;">Customized Marker</div>',
    }
  ]"
  :isMark="true"
  directionClass="left-to-right"
/>

To use right-to-left direction, set directionClass to right-to-left:

<wiz-ref-list
  :items="[
    {
      text: '<div style="line-height: 20px;text-align: right;">Right-to-Left Item</div>',
    }
  ]"
  directionClass="right-to-left"
/>

To create a plain list without markers, set isMark to false:

<wiz-ref-list
  :items="[
    {
      text: '<div style="line-height: 20px;text-align: left;">No marker for this list item</div>',
    }
  ]"
  :isMark="false"
/>

Properties

The following properties are available:

Property	Type	Default value	Description
items	array	[...]	Array of items, each containing "mark" and "text".

item

The following properties are available:

Property	Type	Default value	Description
isMark	boolean	true	Defines marker's visibility.
mark	string	"•"	List item marker symbol.
text	string	Article №	List item text