Create Ordered List with ListBox
By default, the ListBox component doesn't show an order list of items. Displays a simple list where only item label is shown. However, using item templates you can customize the content and appearance of each item with use of HTML custom elements and CSS.
In this article, you will learn how to create an item template and show order number for each item in the list. A sample code is available in JavaScript, Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
An example of ListBox component that shows an ordered list. The item order number is customized using a green color and italic font style. Also there is a space set between the order number and item label using CSS. In addition, you can drag and drop items and the order number will change accordingly when dragged item drops.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Create Ordered List
Because by default only the item's label is shown, in order to display the order number, you need to create a template. The item template function already supports the index parameter, which you can use to show the order number.
In this example, the item template is simple. It uses the standard div element and two span elements. The first span element shows the order number, while the second one the item label.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
The index starts from 0, for the first item in the list.
In addition, using CSS you can custom classes and change the appearance of the item content. In this case, the order number appears in green color with italic font style.
Conclusion
To create ordered list with ListBox component, where each item shows the order number is simple. You only need to use the item template, which provides the item index in the list and show it by using standard HTML elements. In addition, with CSS you can customize the appearance of the order number or other parts of the item content.
ListBox is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.