This package contains the Lists, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/lists

Usage

We have also added some utility components to add inside the ListItem which are:

• LeftContent (which is used for items on the left)
• MainContent (which is used mainly for the text in the center)
• RightContent (which is used for items on the right)

import { List, ListItem } from '@slup/lists'

export class Test extends Component {
  render() {
    return(
      <List>
        <ListItem>
          <YourContent />
        </ListItem>
      </List>
    )
  }
}

Nested List

This example shows that lists can be nested

export class Home extends Component {
  state = { visible: false }

  handleClick() {
    this.setState({ visible: !this.state.visible })
  }

  render() {
    return (
      <List>
        <ListItem sublist visible={this.state.visible}>
          {/* This item will trigger the event */}
          <ListItem onClick={this.handleClick.bind(this)}>Trigger</ListItem>
          {/* This is the nested list */}
          <List>
            <ListItem>Nested</ListItem>
            <ListItem>Nested</ListItem>
            <ListItem>Nested</ListItem>
          </List>
        </ListItem>
      </List>
    )
  }
}

Available properties

| Props | Type | Default | Documentation | |------------- |:-------------:|:-------------:|------: | | ripple | boolean | true | Link | | twoline | boolean | false | Link | | threeline | boolean | false | Link | | hoverable | boolean | true | Link | | sublist | boolean | false | Link | | nested | boolean | false | Link | | avatar | boolean | false | Link |

Property: 'ripple'

This property if set to false will remove the ripple effect from the ListItem

<List>
  <ListItem ripple={false}>
    <YourContent />
  </ListItem>
</List>

Property: 'twoline'

This property will give more height to create a list with two lines of text

import {
  List,
  ListItem,
  MainContent
} from '@slup/lists'

<List>
  <ListItem twoline>
    <MainContent>
      <h5 style={{margin: 0}}>Twoline</h5>
      <p style={{margin: 0, fontSize: 14}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </MainContent>
  </ListItem>
</List>

Property: 'threeline'

This property will give more height to create a list with three lines of text

import {
  List,
  ListItem,
  MainContent
} from '@slup/lists'

<List>
  <ListItem threeline>
    <MainContent>
      <h5 style={{margin: 0}}>Twoline</h5>
      <p style={{margin: 0, fontSize: 14}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p style={{margin: 0, fontSize: 14}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </MainContent>
  </ListItem>
</List>

Property: 'hoverable'

This property if set to false will not change the ListItem background on hovering

<List>
  <ListItem hoverable={false}>
    <YourContent />
  </ListItem>
</List>

Property: 'sublist'

Note: if you want a full example about triggering nested lists take a look at this

This property HAVE TO be set to make a nested list

<List>
  <ListItem sublist visible>
  <ListItem><SomeText /></ListItem>
    <List>
      <ListItem><YourContent /></ListItem>
    </List>
  </ListItem>
</List>

Property: 'nested'

This property will give some spacing on the left of the list

<List>
  <ListItem sublist visible>
  <ListItem><SomeText /></ListItem>
    <List>
      <ListItem nested><YourContent /></ListItem>
    </List>
  </ListItem>
</List>

Property: 'avatar' [LeftContent]

This property will better spacing for an image such as a avatar icon

import {
  List,
  ListItem,
  LeftContent,
  MainContent,
  RightContent
} from '@slup/lists'

<List>
  <ListItem>
    <LeftContent avatar>
      <img />
    </LeftContent>
    <MainContent>
      <YourContent />
    </MainContent>
    <RightContent>
      <Icon />
    </RightContent>
  </ListItem>
</List>