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 @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 '@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 |
|---|---|---|---|---|
ref | Ref<T> | - | No | |
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 | ChameleonIconComponent | - | No | The icon to be displayed in the ListItem component. Accepts either an icon name from the icons package or a custom React component. |
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.