Interactive List
Interactive List allows users to build lists with multiple options that have some kind of interaction. It can be, and is not limited to, checkboxes, radios, toggles and buttons. This component is built on top of the DataList component that allows the creation of scrollable lists with multiple entries of different kinds of data.
import React from "react";
import { InteractiveList } from "@nimbus-ds/patterns";
import { Box, Tag } from "@nimbus-ds/components";
const Example: React.FC = () => (
<InteractiveList>
<InteractiveList.CheckboxItem
title="First element"
description="Description of the first element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
<InteractiveList.CheckboxItem
title="Second element"
description="Description of the second element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
<InteractiveList.CheckboxItem
title="Third element"
description="Description of the third element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
</InteractiveList>
);
export default Example;
Instale o componente via terminal.
npm install @nimbus-ds/interactive-list
Additional props are passed to the <InteractiveList> element. See div docs for a list of props accepted by the <InteractiveList> element.
InteractiveList
Name | Type | Default | Description |
---|---|---|---|
children | |||
bottomDivider | boolean | 'true' | Defines whether the List has a bottom border. |
InteractiveList.Structure
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ButtonItem
Name | Type | Default | Description |
---|---|---|---|
iconButton* | object | Button props inherited from Nimbus components | |
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.CheckboxItem
Name | Type | Default | Description |
---|---|---|---|
checkbox* | Checkbox props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.RadioItem
Name | Type | Default | Description |
---|---|---|---|
radio* | Radio props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ToggleItem
Name | Type | Default | Description |
---|---|---|---|
toggle* | Toggle props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.StructureSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ButtonItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.CheckboxItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.RadioItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ToggleItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
toggle* | Toggle props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |