Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/list

Index

Type aliases

ListElement

ListElement: HTMLUListElement | HTMLOListElement

ListItemAddonPosition

ListItemAddonPosition: "top" | "middle" | "bottom"

ListItemAddonType

ListItemAddonType: "icon" | "avatar" | "media" | "large-media"

ListItemHeight

ListItemHeight: "auto" | "normal" | "medium" | "large" | "extra-large"

Variables

List

List: ForwardRefExoticComponent<ListProps & RefAttributes<ListElement>> = ...

The List component creates an unstyled ordered or unordered list that should be used with the ListItem, ListItemLink, and SimpleListItem components.

ListItem

ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLLIElement>> = ...

The ListItem creates a clickable and focusable <li> within a List that can optionally render addons to the left and right of the children or text.

ListItemLink

ListItemLink: ForwardRefExoticComponent<(ListItemLinkProps & RefAttributes<HTMLAnchorElement | ElementType<any>>) & (ListItemLinkWithComponentProps & RefAttributes<HTMLAnchorElement | ElementType<any>>)> = ...

This component is a really bad attempt at creating a Link within a List that has the main ListItem styles. It will probably be better to just use the ListItemChildren within your Link component instead.

ListSubheader

ListSubheader: ForwardRefExoticComponent<ListSubheaderProps & RefAttributes<HTMLLIElement>> = ...

This is a simple component that will render a <li> with the subheader typography styles. It also supports an inset variant that adds some spacing to the left of the text to align with other ListItem that have left addons.

SimpleListItem

SimpleListItem: ForwardRefExoticComponent<SimpleListItemProps & RefAttributes<HTMLLIElement>> = ...

The SimpleListItem component is used to create a non-clickable item within a List. This is really just useful since it allows for the ListItem styling behavior of left and right icons, avatars, and media.

Note: Even though this component exists, it is recommended to use the ListItemChildren component instead if you want the "addon" styling/behavior since screen readers read li items within lists differently.

Functions

ListItemAddon

ListItemChildren

  • The ListItemChildren component is used to create a styled list item that can have optional addons to the left or right of the children in the form of icons, avatars, or media. The children can be replaced by the primaryText and secondaryText props to create stacked text spanning two or more lines with the default behavior of using line-clamp at three lines.

    Note: This will return a React.Fragment of the children and does not wrap in a DOM node for styling. The parent component should normally have display: flex for the styling to work.

    Parameters

    Returns ReactElement

ListItemText

getListItemHeight

  • Gets the expected height for the ListItem or SimpleListItem based on the addons and secondaryText props.

    Conversions:

    • height !== "auto" -> height
    • secondaryText or left/right addon is media/media-large -> "extra-large"
    • left/right addon is avatar -> "large"
    • left/right addon is icon -> "medium"
    • no addons and no secondary text -> "normal"
    internal

    Parameters

    Returns ListItemHeight

Generated using TypeDoc