List is a presentation component which displays text in a list. Text can be in an ordered, or unordered, list with or without an image or icon.
The component displays a vertically stacked list of items.
List must be manually installed in the adapt framework and authoring tool.
If List has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.
The attributes listed below are used in components.json to configure List, and are properly formatted as JSON in example.json.
core model attributes: These are inherited by every Adapt component. Read more.
_component (string): This value must be: text
.
_classes (string): CSS class name to be applied to List’s containing div
. The class must be predefined in one of the Less files. Separate multiple classes with a space. Supported classes are "align-items-vert-center"
which aligns either the step number or image centrally, on the vertical axis, with the content.
_layout (string): This defines the horizontal position of the component in the block. Acceptable values are full
, left
or right
.
_animateList (boolean): If set to true
, the list of items will animate when scrolled into view. The default value is false
.
_showBackground (boolean): Setting this value to true
will set a background colour on the items. The default is false
.
_percentInviewVertical (number): Controls what percentage of the list items height needs to be in the viewport in order for the items to animate. Default value is to animate when 70% 'in view'. You only need to set this property if you want to override the default value.
_orderedList (boolean): If set to true
, each item in the list will numbered. The default value is false
.
_numLists (number): This defines how many lists there are.
_items (string): Multiple items may be created. Each item represents one list item for this component and contains values for title, titleReduced, body, _iconSelection, _icon, _imageSrc and alt.
_list (number): Specifies which list the item will show in.
title (string): This is the title text for the list item.
titleReduced (string): This text is displayed as the item's reduced text.
body (string): This is the main body text for the list item.
_iconSelection (string): Pre-defined class name for the icon used on the item.
_icon (string): Class name for the icon used on the item. The class should be defined in the theme.
_imageSrc (string): File name (including path) of the image. Path should be relative to the src folder (e.g., course/en/images/origami-menu-two.jpg). Only supported when _orderedList is set to
false
.
alt (string): This text becomes the image’s
alt
attribute.
No known limitations.
Version number: 3.2.0
Framework versions: 5.8+
Author / maintainer: Kineo / DeltaNet (Forked from Kineo)
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera