List: React
Lists are vertically organized groups of related text content marked with a bullet, a number, or an icon.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { List, ListItem } from '@mediahuis/chameleon-react';
export default function Example() {
return (
<List>
<ListItem>Example 1</ListItem>
<ListItem>Example 2</ListItem>
</List>
);
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
as | 'ul' | 'ol' | ul | No | Allows setting the HTML element for the List component and controls its visual appearance. |
children | ReactNode | - | No | The contents displayed within the List component, typically consisting of ListItem components. |
style | StyleProps | - | No | Custom styling on the List component. |
Properties of ListItem
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
accessibilityLabel | String | '' | No | Sets the accessibility friendly label for the ListItem, which will not be shown visually. |
children | ReactNode | - | No | The content to be rendered within the ListItem component. |
icon | ElementType | - | No | The icon to be displayed in the ListItem component, which can be a functional component, a node, or an object. |
icon
The icon property allows you to specify an icon to be used as a list-style. You can choose from a variety of icons outlined in the Icons documentation.