list-item

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

32,039

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

32 KB

Uses an additional container component if `ListItemSecondaryAction` is the last child.

2 contributors

Install list-item as a package?

Copied

npm i @bit/mui-org.material-ui.list-item

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Uses an additional container component if ListItemSecondaryAction is the last child. Demos:

API:

Uses an additional container component if ListItemSecondaryAction is the last child.

Properties

Name	Type	Description
alignItems	`'flex-start' \| 'center'`	Defines the `align-items` style property.
autoFocus	`bool`	If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true.
button	`bool`	If `true`, the list item will be a button (using `ButtonBase`). Props intended for `ButtonBase` can then be applied to `ListItem`.
children	`custom`	The content of the component. If a `ListItemSecondaryAction` is used it must be the last child.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component. By default, it’s a `li` when `button` is `false` and a `div` when `button` is `true`.
ContainerComponent	`elementType`	The container component used when a `ListItemSecondaryAction` is the last child.
ContainerProps	`object`	Props applied to the container component if used.
dense	`bool`	If `true`, compact vertical padding designed for keyboard and mouse input will be used.
disabled	`bool`	If `true`, the list item will be disabled.
disableGutters	`bool`	If `true`, the left and right padding is removed.
divider	`bool`	If `true`, a 1px light border is added to the bottom of the list item.
focusVisibleClassName	`string`
selected	`bool`	Use to apply selected styling.