Skip to main content
react-md
react-md - List - SassDoc

Variables

rmd-list-vertical-padding

Number

The amount of padding to place before the first list item and after the last list item in the list.

$rmd-list-vertical-padding: 0.5rem !default;
See also

rmd-list-dense-vertical-padding

Number

The amount of padding to place before the first list item and after the last list item in the list.

$rmd-list-dense-vertical-padding: 0.25rem !default;

rmd-list-horizontal-padding

Number

The amount of padding to place to the left and right of all the list items. It is recommended to keep this value at 0 and instead update the $rmd-list-item-horizontal-padding instead to get better clickable areas and hover effects on each item.

$rmd-list-horizontal-padding: 0 !default;
See also

rmd-list-dense-horizontal-padding

Number

The amount of padding to place to the left and right of all the list items in a "dense" layout. It is recommended to keep this value at 0 and instead update the $rmd-list-item-horizontal-padding instead to get better clickable areas and hover effects on each item.

$rmd-list-dense-horizontal-padding: $rmd-list-horizontal-padding !default;
See also

rmd-list-line-height

Number

The line height to apply to all items within the list. The default typography applied to lists uses the subtitle-1 typography specs, but it looks better to apply the main text line-height within lists.

$rmd-list-line-height: rmd-typography-value(body-1, line-height) !default;

rmd-list-font-size

Number

The font size to apply to all items in a list.

$rmd-list-font-size: rmd-typography-value(subtitle-1, font-size) !default;

rmd-list-dense-font-size

Number

The font size to use for a "dense" list layout.

$rmd-list-dense-font-size: 0.8125rem !default;

rmd-list-item-vertical-padding

Number

The amount of vertical padding to apply to each list item. This is really only added to help with the default "growing height" case of items since the list item is aligned using a centered flexbox.

$rmd-list-item-vertical-padding: 0.5rem !default;

rmd-list-item-horizontal-padding

Number

The amount of horizontal padding to apply to each list item.

$rmd-list-item-horizontal-padding: 1rem !default;

rmd-list-item-height

Number

The default height for a list item. To help create more general lists and layouts this height will be applied as a min-height instead of height so that it can grow in height based on the content. When using the ListItem component, it will automatically "upgrade" to use height when the secondaryText or list item "addons" are provided to help enforce the material design specs.

$rmd-list-item-height: 3rem !default;

rmd-list-item-dense-height

Number

The default height for a dense list item.

$rmd-list-item-dense-height: 2.5rem !default;

rmd-list-item-medium-height

Number

The height for a "medium" sized list item. This will normally get applied for any list item that has an icon or avatar.

$rmd-list-item-medium-height: 3.5rem !default;

rmd-list-item-dense-medium-height

Number

The height for a "medium" sized list item that is also dense.

$rmd-list-item-dense-medium-height: 3rem !default;

rmd-list-item-large-height

Number

The height for a "large" sized list item. This will normally get applied for any list item that has secondary text with no icon, or avatar.

$rmd-list-item-large-height: 4rem !default;

rmd-list-item-dense-large-height

Number

The height for a "large" sized list item that is also dense.

$rmd-list-item-dense-large-height: 3.5rem !default;

rmd-list-item-extra-large-height

Number

The height for an "extra large" sized list item. This will normally get applied for any list item that:

  • is single line but has a media
  • has secondary text with an icon, avatar, media, or metadata
$rmd-list-item-extra-large-height: 4.5rem !default;

rmd-list-item-dense-extra-large-height

Number

The height for a "extra large" sized list item that is also dense.

$rmd-list-item-dense-extra-large-height: 4rem !default;

rmd-list-item-three-line-height

Number

The height for a list item with three lines of text.

$rmd-list-item-three-line-height: 5.5rem !default;

rmd-list-item-dense-three-line-height

Number

The height for a list item with three lines of text while being dense.

$rmd-list-item-dense-three-line-height: 5rem !default;

rmd-list-item-secondary-text-line-height

Number

The line-height to use for the secondary text within the list item. This is different than the primary text since this can span multiple lines by default.

$rmd-list-item-secondary-text-line-height: 1.42857 !default;

rmd-list-item-secondary-text-three-line-max-height

Number

The max allowed height for the three-line list item's secondary text. You probably don't want to change this value unless you changed the other list item heights.

$rmd-list-item-secondary-text-three-line-max-height: 3rem !default;

rmd-list-item-dense-secondary-text-three-line-max-height

Number

The max allowed height for the dense three-line list item's secondary text. You probably don't want to change this value unless you changed the other list item heights.

$rmd-list-item-dense-secondary-text-three-line-max-height: 2.25rem !default;

rmd-list-item-text-keyline

Number

The spacing between the left side of the list item up to the left side of the first character of text. This is normally just used to align the list items with other components.

$rmd-list-item-text-keyline: 4.5rem !default;

rmd-list-item-media-size

Number

The size to use for media that appears before or after the main content in a list item.

$rmd-list-item-media-size: 3.5rem !default;

rmd-list-item-media-large-size

Number

The size to use for large media that appears before or after the main content in a list item.

$rmd-list-item-media-large-size: 6.25rem !default;

rmd-list-item-media-spacing

Number

The amount of spacing to place between the main content and media that appears in a list item.

$rmd-list-item-media-spacing: 1rem !default;

rmd-list-item-disabled-opacity

Since v2.4.3

Number

The opacity to apply to a list item when it is disabled and the disabledOpacity boolean is enabled that will also darken any addons rendered in the list item.

$rmd-list-item-disabled-opacity: 0.5 !default;

rmd-list-theme-values

Map

A Map of all the "themeable" parts of the list package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-list-theme-values: (
  vertical-padding: $rmd-list-vertical-padding,
  horizontal-padding: $rmd-list-horizontal-padding,
  font-size: $rmd-list-font-size,
  text-keyline: $rmd-list-item-text-keyline,
  item-height: $rmd-list-item-height,
  item-medium-height: $rmd-list-item-medium-height,
  item-large-height: $rmd-list-item-large-height,
  item-extra-large-height: $rmd-list-item-extra-large-height,
  item-three-line-height: $rmd-list-item-three-line-height,
  item-vertical-padding: $rmd-list-item-vertical-padding,
  item-horizontal-padding: $rmd-list-item-horizontal-padding,
  item-secondary-three-line-height:
    $rmd-list-item-secondary-text-three-line-max-height,
  dense-font-size: $rmd-list-dense-font-size,
  dense-vertical-padding: $rmd-list-dense-vertical-padding,
  dense-horizontal-padding: $rmd-list-dense-horizontal-padding,
  dense-item-height: $rmd-list-item-dense-height,
  dense-item-medium-height: $rmd-list-item-dense-medium-height,
  dense-item-large-height: $rmd-list-item-dense-large-height,
  dense-item-extra-large-height: $rmd-list-item-dense-extra-large-height,
  dense-item-three-line-height: $rmd-list-item-dense-three-line-height,
  dense-item-secondary-three-line-height:
    $rmd-list-item-dense-secondary-text-three-line-max-height,
  media-size: $rmd-list-item-media-size,
  media-spacing: $rmd-list-item-media-spacing,
  media-large-size: $rmd-list-item-media-large-size,
) !default;

Mixins

rmd-list-theme

mixin

Creates the styles for one of the list's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-list-theme-values value to.

String
$theme-style

One of the keys of rmd-list-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-list-theme-values map when null.

Color|String|Numbernull

rmd-list-theme-update-var

mixin

Updates one of the list's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The list theme style type to update. This should be one of the $rmd-list-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-list-unstyled

mixin

A "general" use mixin that will remove the default browser styles for a list and apply the optionally provided margin and padding instead.

Parameters
NameDescriptionTypeDefault Value
$padding

The amount of padding to apply.

String|Number0
$margin

The amount of margin to apply.

String|Number0

rmd-list-dense-theme

mixin

Updates all the css variables for the list package to use a dense spec.

Examples

Example Usage
@use "react-md" as *;

:root {
  @include rmd-list-dense-theme;
}

rmd-list

mixin

Creates the styles for a list in react-md.

rmd-list-item-base

mixin

The base styles required for a ListItem. This propbably won't be used externally.

rmd-list-item-dense-theme

mixin

Updates all the list item css variables to apply to dense theme.

Examples

Example Usage
@use "react-md" as *;

:root {
  @include rmd-list-item-dense-theme;
}

rmd-list-item-addon-spacing

mixin

Updates the spacing for a list item addon by updated the text-spacing from the @react-md/icon package and doing some calculations with the current text-keyline within the list.

This propably shouldn't be used externally.

Parameters
NameDescriptionTypeDefault Value
$subtract

The amount that should be subracted

String|Number

Examples

Example Usage
@use "react-md" as *;

.custom-updater {
  @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));
}

rmd-list-item

mixin

Creates all the styles for a list item.

rmd-list-subheader

mixin

Creates the styles for a subheader within a list.

react-md-list

mixin

Creats all the styles for the list package.

Functions

rmd-list-theme

function

This function is used to quickly get one of the list's theme values. This is really just for the rmd-list-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the list's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-list-theme-values map keys to get a value for.

String

rmd-list-theme-var

function

This function is used to get one of the list's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-list-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the link's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-list-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull