Alternate Background Colors for Items in ListBox Items
You can modify the existing CSS classes for ListBox component that govern its appearance or create your own. In general, you can change every component part in this way. In addition, you can also use dynamic styles that you can apply to each item separately during run-time from code. This allows you to set up conditions when and how item(s) will appear in the ListBox.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to apply alternate background colors for even and odd items in ListBox component, using dynamic styles.
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
In this demo, dynamic styles are already set during initialization of the ListBox. Items appear in alternate background colors based on their position in the list. Items with odd position appear in light gray background, while the items with even position appear in dark gray background.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Show Items in Alternate Background Colors
You can set up items to appear in different colors using CSS selectors and modifying existing CSS classes, but this change is mostly static. You can change the appearance of list box items, by using dynamic styles.
You can apply a different style to each item state: disabled, normal, hovered or selected.
Alternate colors can increase readability of the list, and because item order can change by different actions like add/remove, expand/collapse, drag and drop etc. its best to apply styles when list box layout updates. An event that occurs when there is a change in list layout is updateComplete event. You can handle this event in your code and set different background colors for items based on their positing within the list.
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.
By cycling through all items in this list, based on their index, a different value is applied to the style field of each item.
In this case, the items with even index have dark gray background, while the items with odd index have light gray background. In addition, when item is selected, its text will appear in bold.
The style field accepts an object that contains settings for each item state: disabled, normal, hovered or selected.
item.style = {
disabled: {},
hovered: {},
normal: {},
selected: {}
}
You can add any CSS attribute to item style, it works basically as an inline style attribute in HTML. Once applied through the item style field, these settings will override default appearance set from CSS classes.
Conclusion
Showing items in alternate background colors in IntegralUI ListBox component can help to increase its readability, especially useful during scrolling. To show even and odd items in different colors you can use either CSS classes or dynamic styles, which are applied during runtime based on some condition set in your code. You can have a different style for each item separately, in default state or based on whether they are disabled, hovered or selected.
ListBox is part of IntegralUI Web, a suite of native web componentsthat you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.