@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

    Install

    npm i @mandala-ui/list

    DownloadsWeekly Downloads

    1

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    192 kB

    Total Files

    16

    Last publish

    Collaborators

    • lucaska