List

2.2.1

El componente List nos permite organizar en una lista distintas informaciones con formato de texto.

Unordered

Ordered

Skeleton

import React from "react";
import { List } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <List as="ul">
    <List.Item>Aliquam vitae eleifend nulla. Duis</List.Item>
    <List.Item>Nullam malesuada sapien sit amet</List.Item>
    <List.Item>Vivamus diam eros, pretium a</List.Item>
    <List.Item>Mauris ut feugiat quam. Fusce</List.Item>
    <List.Item>Duis leo orci, consectetur pulvinar</List.Item>
  </List>
);

export default Example;

Anatomía del componente

Se compone por un bullet point o un numerador y un texto.

Guidelines

Utilizamos este componente cuando necesitamos organizar varios textos de forma vertical en una lista numerada o sin numerar.

Recomendaciones de uso

Organizar elementos de forma numerada
Organizar elementos usando bullet points

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/list

List

Name	Type	Default	Description
children*	React.ReactNode		The content of the list.
as	'ol' 'ul'	'ul'	Determines the type of html list that will be rendered

List.Item

Name	Type	Default	Description
children*	React.ReactNode		The content of the list item.

List.Skeleton

Name	Type	Default	Description
children*	React.ReactNode		The content of the list skeleton.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.

List.SkeletonItem

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.