wiz-list

wiz-list is designed to manage and render structured lists and collections of data. wiz-list is the primary container for the wiz-list-body and wiz-list-item components. Through a slot-based structure, you can create flexible list layouts incorporating headings, body sections, items, and footers.

wiz-list-body provides a slot for list items. It requires no direct properties—any data or related logic is provided by the wiz-list component or handled through the provideChildItems mixin.

wiz-list-item must always be nested under the wiz-list-body component. Every wiz-list-item represents a single list entry where you can further nest other components, like wiz-text or wiz-image.

Learn more about components

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

Usage

Example usage
A fully configured wiz-list with custom indentations, mark properties, and bullet styling:

<wiz-list
:itemIndent="10"
:markLineHeight="32"
:markSize="20"
listType="bulleted"
listSubtypeBullet="square"
>
  <wiz-list-body nested>
    <wiz-list-item nested>
      <wiz-text
        sealed="position rotation width height delete duplicate"
        :text="$t('listText1')"
      ></wiz-text>
    </wiz-list-item>
    <wiz-list-item nested>
      <wiz-text
        sealed="position rotation width height delete duplicate"
        :text="$t('listText2')"
      ></wiz-text>
    </wiz-list-item>
    <wiz-list-item nested>
      <wiz-text
        sealed="position rotation width height delete duplicate"
        :text="$t('listText3')"
      ></wiz-text>
    </wiz-list-item>
  </wiz-list-body>
</wiz-list>

Follow this example to nest wiz-list-body, wiz-list-item, and localized text strings within your wiz-list component.

Localization
Use the <i18n> section and include your translations inline as follows:

<i18n>
    {
      "eng": {
        "listText1": "<span>Add item label 1</span>",
        "listText2": "<span>Add item label 2</span>",
        "listText3": "<span>Add item label 3</span>",
      }
    }
</i18n>

Properties

The following properties are available:

Property	Type	Default value	Description
componentName	string	List	The text label displayed in eWizard Editor
customSymbol	string	N/A	Custom list item, if "listType=bulleted". Allowed value: CUSTOM
imageAlt	string	icon	The text displayed on the site layout if the image fails to load.
imageSize	number	16	The card height in pixels.
imageSrc	string	defaultImage	A path to the card image
itemIndent	number	4	A list item bottom indent in pixels.
listSubtypeBullet	string	circle	List item bullet format, if "listType=bulleted". Oneof "circle", "empty-circle", "diamond", "square", "check", "custom-value".
listSubtypeNumber	string	arabic	List item number format, if "listType=numbered". Oneof: "alphabet", "arabic", "roman".
listType	string	bulleted	The list type. Oneof: "bulleted", "numbered", "image".
markFill	string	#0277BD	A color for list item mark. Accepted: HEX, RGB, RGBA. Available for "listType=bulleted", "listType=numbered".
markLineHeight	string	20	A line height for list item mark in pixels. Available for "listType=bulleted", "listType=numbered".
markMinWidth	number	16	List minimum width in pixels. Available for "listType=numbered".
markSize	number	12	List font size in pixels. Available for "listType=bulleted", "listType=numbered".
markStart	number	1	List starting number. Available for "listType=numbered".
markTextAlign	string	center	List item text alignment. Available for "listType=numbered". Oneof: "center", "left", "right", "justify".
textOffset	number	8	List item offset to the right in pixels.
topImageOffset	number	2	List top offset in pixels.