Styling
The Navigable List Component provides a highly customizable styling system through its listItemStyles property, allowing developers to define styles and classes for list items based on their states. This section documents the styling options available for individual list items and overall component customization.
listItemStyles Property
The listItemStyles property accepts an object of type IListItemStylesProps, enabling fine-grained control over the appearance of list items depending on their state (e.g., selected, disabled, focused). Below are the available options:
Properties
| Property | Type | Description |
|---|---|---|
| selectedClasses | string | CSS class to apply to a selected list item. |
| selectedStyle | CSSProperties | Inline styles to apply to a selected list item. |
| disabledClasses | string | CSS class to apply to a disabled list item. |
| disabledStyle | CSSProperties | Inline styles to apply to a disabled list item. |
| focusedClasses | string | CSS class to apply to a focused (hovered or keyboard-selected) list item. |
| focusedStyle | CSSProperties | Inline styles to apply to a focused list item. |
| checkboxClasses | string | CSS class to apply to the checkbox input for list items (when checkboxOnMultiple is enabled). |
| checkboxStyle | CSSProperties | Inline styles to apply to the checkbox input for list items. |
Example Usage
Below is an example of how to customize the styling of list items based on their states.