Interactive List

1.3.6

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;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/interactive-list

Props

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	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	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	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	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	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	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	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	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	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	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.