@rmwc/list
Advanced tools
Lists are continuous, vertical indexes of text or images.
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
<List twoLine>
<ListItem>
<ListItemGraphic icon="star_border" />
<ListItemText>
<ListItemPrimaryText>Cookies</ListItemPrimaryText>
<ListItemSecondaryText>$4.99 a dozen</ListItemSecondaryText>
</ListItemText>
<ListItemMeta icon="info" />
</ListItem>
<ListItem>
<ListItemGraphic icon="local_pizza" />
<ListItemText>
<ListItemPrimaryText>Pizza</ListItemPrimaryText>
<ListItemSecondaryText>$1.99 a slice</ListItemSecondaryText>
</ListItemText>
<ListItemMeta icon="info" />
</ListItem>
<ListItem activated>
<ListItemGraphic icon="mood" />
<ListItemText>
<ListItemPrimaryText>Icecream</ListItemPrimaryText>
<ListItemSecondaryText>$0.99 a scoop</ListItemSecondaryText>
</ListItemText>
<ListItemMeta>Winner!</ListItemMeta>
</ListItem>
</List>
While there are siutations where you would need / want to compose the entire list yourself, it can be quite verbose. SimpleListItem provides a compact syntax that allows you to pass all options as props. The following example is roughly equivalent to the one above.
<List twoLine>
<SimpleListItem
graphic="star_border"
text="Cookies"
secondaryText="Chocolate chip"
metaIcon="info"
/>
<SimpleListItem
graphic="local_pizza"
text="Pizza"
secondaryText="Pepperoni"
metaIcon="info"
/>
<SimpleListItem
activated
graphic="mood"
text="Icecream"
secondaryText="Chocolate cookie dough"
meta="Winner!"
/>
</List>
A List Component
| Name | Type | Description |
|---|---|---|
apiRef | undefined | (api: ListApi | null) => void | An internal api used for cross component communication |
avatarList | undefined | false | true | Makes the list start detail circular for avatars. |
dense | undefined | false | true | Reduces the padding on List items. |
foundationRef | React.Ref<MDCListFoundation | null> | Advanced: A reference to the MDCFoundation. |
nonInteractive | undefined | false | true | Makes the list non interactive. In addition, you'll have to set ripple={false} on the individual ListItems. |
onAction | undefined | (evt: ListOnActionEventT) => void | A callback for when a list item is interacted with. evt.detail = number |
twoLine | undefined | false | true | Gives more space for dual lined list items. |
vertical | undefined | false | true | Sets the lists vertical orientation. Defaults to true |
wrapFocus | undefined | false | true | Sets the list to allow the up arrow on the first element to focus the |
| last element of the list and vice versa. Defaults to true |
A ListItem component.
| Name | Type | Description |
|---|---|---|
activated | undefined | false | true | A modifier for an active state. |
disabled | undefined | false | true | A modifier for a disabled state. |
selected | undefined | false | true | A modifier for a selected state. |
Primary Text for the ListItem
Secondary text for the ListItem
A graphic / icon for the ListItem
Meta content for the ListItem. This can either by an icon by setting the icon prop, or any other kind of content.
A divider for the List
A container to group ListItems
A subheader for the ListGroup
A simple list item template.
| Name | Type | Description |
|---|---|---|
activated | undefined | false | true | A modifier for an active state. |
children | React.ReactNode | Children to render |
disabled | undefined | false | true | A modifier for a disabled state. |
graphic | RMWC.IconPropT | A graphic icon for the ListItem. |
meta | React.ReactNode | Meta content for the ListItem instead of an icon. |
metaIcon | RMWC.IconPropT | A meta icon for the ListItem |
secondaryText | React.ReactNode | Secondary Text for the ListItem. |
selected | undefined | false | true | A modifier for a selected state. |
text | React.ReactNode | Text for the ListItem. |
8.0.5 (2023-02-09)
FAQs
RMWC List component
The npm package @rmwc/list receives a total of 6,517 weekly downloads. As such, @rmwc/list popularity was classified as popular.
We found that @rmwc/list demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.