Highlight Items in ListBox
IntegralUI ListBox component is fully customizable, you can modify its appearance either through CSS or using dynamic styles. In case of highlighting items, you can just change the CSS class that governs the appearance of items by using selectors. However, the better way is to apply a different style for specific item based on some condition set in code.
In this article, you will learn how to use check boxes to highlight items in different colors in ListBox component. 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
As demo shows, if an item is checked a light green line will appear on the left side, while its label will appear in bold. For demonstration purposes, the list appears in groups, with each item having a check box.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Highlight Items in Different Color
The best way to change appearance of items during run-time is by using dynamic styles. Each item can have a different CSS style applied depending on some condition set in code and for each state: disabled, normal, hovered or selected.
// Highlight items with custom style
let hightlightStyle = {
borderLeftColor: '#56c756',
borderLeftWidth: '4px',
fontWeight: 'bold'
}
In this example, a check box is used to highlight an item. If the item is checked, a light green line will appear on its left side. In addition, the item label appears in bold. In order for item to appear as highlighted in each state, you need to apply the style for each item state:
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.
In this case, the applied style increases the left border width and changes to light green color. In addition, the item label appears in bold. Once the style is applied, you can update the ListBox appearance by calling the refresh method.
Conclusion
Highlighting items is useful when you have large lists, where you need to mark specific items to appear clearly in the list. In IntegralUI ListBox component, you can highlight items in different ways by changing the component CSS classes or using dynamic styles in code. You can set up custom conditions that when fulfilled will apply a style and highlight an item, during run-time.
ListBox is part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript frameworks.