@mandala-ui/list

1.0.8 • Public • Published

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

mandala-bottom

Package Sidebar

Install

npm i @mandala-ui/list

Weekly Downloads

2

Version

1.0.8

License

MIT

Unpacked Size

192 kB

Total Files

16

Last publish

Collaborators

  • lucaska