List

2.2.1

O componente List nos permite organizar informações em formato de texto em uma lista.

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;

Anatomia do componente

O componente é composto por um bullet point ou um numerador e um texto.

Guidelines

Utilizamos esse componente quando precisamos organizar várias informações textuais de forma vertical e seguindo uma ordem numerada ou não.

Recomendação de uso

Organizar informações de forma numerada
Organizar informações em bullet points

Implementação

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