2.0.2 • Published 6 years ago
MaterialR List
@materialr/list
React Material list implementation.
Installation
$ npm install --save @materialr/list
Demo
A full demo is available on the MaterialR website
showcasing all variants.
Components
Named exports
import { List } from '@materialr/list';
Props
| Prop | Type | Required | Default | Description |
|---|
avatar | bool | No | false | Whether the list contains avatar as opposed to icons |
children | node | Yes | N/A | The child elements to render inside the list |
className | string | No | undefined | Additional classNames to add |
dense | bool | No | false | Whether a dense list is to be rendered |
display | enum (list/nav) | No | list | Whether to render a list (<ul>) or nav (<nav>) |
twoLines | bool | No | false | Whether this is a list with two-line list items |
import { ListGroup } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
children | node | Yes | undefined | The children to render within |
className | string | No | undefined | Additional classNames to add |
import { ListGroupSubheader } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
className | string | No | undefined | Additional classNames to add |
title | string | Yes | undefined | The title to render within |
import { ListItem } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
activated | bool | No | false | Whether this item is activated |
AnchorComponent | func | No | undefined | A React component to render instead of an <a> element |
anchorProps | shape | No | {} | Additional props to pass to the anchor component |
className | string | No | undefined | Additional classNames to add |
children | node | Yes | undefined | The children to render within |
href | string | No | undefined | The url where the list item should navigate to |
import { listItemDivider } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
className | string | No | undefined | Additional classNames to add |
inset | bool | No | false | Whether the divider is inset from the side |
import { ListItemGraphic } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
avatar | string | without icon | undefined | An avatar image to render |
className | string | No | undefined | Additional classNames to add |
icon | string | without avatar | undefined | A material icon to render |
title | string | with avatar | undefined | A title to add to an avatar |
import { listItemMeta } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
className | string | No | undefined | Additional classNames to add |
icon | string | Yes | N/A | A material icon to render |
onClick | func | No | undefined | A click handler method |
title | string | Yes | N/A | The title attribute |
import { ListItemSecondaryText } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
className | string | No | undefined | Additional classNames to add |
text | string | Yes | N/A | The text to add |
import { ListItemText } from '@materialr/list';
| Prop | Type | Required | Default | Description |
|---|
children | node | Yes | undefined | The children to render within |
className | string | No | undefined | Additional classNames to add |