Mandala UI List Component

Mandala is a React component library that utilizes a declarative CSS library for styling.

Installation

Check the MonoRepo README for installation.

Description

A List is used for content in order or in sequence. The props on this list allow you to create robust compound components. It renders all the children inside a <ListItem /> component.

Usage

if using the whole library:

import { List } from 'mandala';

if only using this component:

import List from '@mandala-ui/list';

Props

• children - items that will be in the list, they must be elements
• contained - will remove the last bottom border if the list is contained inside another element
• indented - adds padding for a contained list
• lineColor - the color of the bottom border of each ListItem
• lined - set this prop to add lines
• lineWidth - width of lines, clamped 1-5.
• narrow - little padding between ListItems.
• ordered - add a number to the front of each ListItem
• wide - lots of padding between ListItems

| propName | propType | defaultValue | isRequired | | -------- | -------- | ------------ | ---------- | | children | node | null | - | | contained| boolean | false | - | | indented | boolean | false | - | | lineColor| string | 'white' | - | | lined | boolean | false | - | | lineWidth| number | 0 | - | | narrow | boolean | false | - | | ordered | boolean | false | - | | wide | boolean | false | - |

TODO:

• [ ] background colors
• [ ] striped
• [ ] infer lined from lineColor prop existence