WideList: React
WideLists represent a set of items displayed in a way to organize related information.
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 { WideList, WideListItem } from '@mediahuis/chameleon-react';
export default function Example() {
return (
<WideList>
<WideListItem title="Item 1" />
<WideListItem title="Item 2" />
</WideList>
);
}
WideList Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | - | No | Children displayed within the WideList (WideListItem). |
WideListItem Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
action | ReactNode | - | No | Contents displayed on the right. Will not be shown when clickable is also true. |
avatar | String | - | No | Controls the Avatar's src prop. |
clickable | Boolean | - | No | If clickable is set to true, the WideListItem will show a hover state. |
description | ReactNode | - | No | The text written under the title. |
iconLeft | ElementType | - | No | Controls the as prop of the Icon on the left side. |
iconRight | ElementType | - | No | Controls the as prop of the Icon on the right side. |
loading | Boolean | - | No | Show a loading state (e.g. while fetching data). |
title | ReactNode | - | No | The text written at the top of the component. |