Boolean
$list-disable-everything: false !default;
Boolean
$list-disable-horizontal: false !default;
Boolean
$list-disable-dense: false !default;
Boolean
$list-disable-item-disabled-color: false !default;
Boolean
$list-disable-item-disabled-opacity: false !default;
Boolean
$list-disable-item-avatar: false;
Boolean
$list-disable-item-media: false !default;
Boolean
$list-disable-item-media-large: false !default;
Boolean
$list-disable-medium-height: false !default;
Boolean
$list-disable-large-height: false !default;
Boolean
$list-disable-extra-large-height: false !default;
Boolean
$list-disable-multiline-clamp: false !default;
Boolean
$list-disable-multiline-height: true !default;
Boolean
$list-disable-item-link-styles: false !default;
Boolean
$list-disable-subheader: false !default;
Boolean
$list-disable-subheader-inset: false !default;
Boolean
$list-disable-divider-inset: divider.$disable-everything !default;
Number
$list-vertical-padding: spacing.get-var(sm) !default;
Number
$list-dense-vertical-padding: spacing.get-var(xs) !default;
Number
$list-horizontal-padding: spacing.get-var(none) !default;
Number
$list-dense-horizontal-padding: $horizontal-padding !default;
Number
$list-dense-font-size: 0.8125rem !default;
Map
$list-typography-styles: map.merge(
typography.$subtitle-1-styles,
(
line-height: map.get(typography.$body-1-styles, line-height),
)
) !default;
Number
$list-item-disabled-opacity: 0.5 !default;
Number
$list-item-vertical-padding: spacing.get-var(sm) !default;
Number
$list-item-horizontal-padding: spacing.get-var(md) !default;
Number
$list-item-height: 3rem !default;
Number
$list-item-dense-height: 2.5rem !default;
Number
$list-item-medium-height: 3.5rem !default;
Number
$list-item-dense-medium-height: 3rem !default;
Number
$list-item-large-height: 4rem !default;
Number
$list-item-dense-large-height: 3.5rem !default;
Number
$list-item-extra-large-height: 4.5rem !default;
Number
$list-item-dense-extra-large-height: 4rem !default;
Number
$list-item-multiline-clamp: 2 !default;
Number
$list-item-multiline-height: 5.5rem !default;
Number
$list-item-dense-multiline-height: 5rem !default;
Number
$list-item-media-spacing: spacing.get-var(md) !default;
Number
$list-item-media-size: 3.5rem !default;
Number
$list-item-media-large-size: 6.25rem !default;
Number
$list-item-secondary-text-line-height: 1.42857 !default;
Number
$list-item-secondary-text-multiline-max-height: 3rem !default;
Number
$list-item-keyline: 4.5rem !default;
Number
$list-item-dense-keyline: 3.5rem !default;
List
$list-variables: (
horizontal-padding,
vertical-padding,
item-keyline,
item-horizontal-padding,
item-vertical-padding,
item-height,
item-medium-height,
item-large-height,
item-extra-large-height,
item-multiline-height,
item-media-size,
item-media-spacing,
item-text-multiline-height,
item-multiline-clamp
);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
Set to true
to disable all the styles.
Set to true
to disable the horizontal list styles.
Set to true
to disable the dense list styles
Set to true
if the ListItem
will always enable the disabledOpacity
prop.
Set to true
if the ListItem
will never enable the disabledOpacity
prop.
Set to true
if the ListItem
will never use an Avatar
as an addon.
Set to true
if the ListItem
will never use a media addon.
Set to true
if the ListItem
will never use a large media addon.
Set to true
if the ListItem
will never use height="medium"
or an icon addon.
Set to true
if the ListItem
will never use height="large"
or an avatar addon.
Set to true
if the ListItem
will never use height="extra-large"
,
secondary text or a media addon.
Set to true
if the ListItem
will never enable the multiline
prop for
secondaryText
.
Set to true
if the ListItem
will never enable the multiline
prop for
secondaryText
.
Set to true
if the ListItemLink
component will not be used.
Set to true
if the ListSubheader
component will not be used.
Set to true
if the inset
prop will never be enabled on the
ListSubheader
component.
Set to true
if a Divider
will never enable the inset
prop within a
List
.
The vertical padding to apply to the List
component.
The vertical padding to apply to a dense List
component.
The horizontal padding to apply to the List
component.
The horizontal padding to apply to a dense List
component.
The default font-size to apply to a dense List
component. This will be applied after the $typography-styles
.
The default typography to apply to the List
component.
The amount of opacity to apply to a disabled ListItem
and the
disableOpacity
prop has been enabled.
The vertical padding to apply to ListItem
.
The horizontal padding to apply to ListItem
.
The default height for a ListItem
that has no addons or secondary text.
The default height for a dense ListItem
that has no addons or secondary text.
The default height for a ListItem
that set height="medium"
or has an icon addon with no secondary text.
The default height for a dense ListItem
that set height="medium"
or has an icon addon with no secondary text.
The default height for a ListItem
that set height="large"
or has an avatar addon with no secondary text.
The default height for a dense ListItem
that set height="large"
or has an avatar addon with no secondary text.
The default height for a ListItem
that set height="extra-large"
or has secondary text or a media addon
The default height for a dense ListItem
that set height="extra-large"
or has secondary text or a media addon
The default line-clamp
for a ListItem
when the multiline
prop is enabled and secondaryText
was provided.
The default height for a ListItem
that has the multiline
prop enabled.
The default height for a ListItem
that has the multiline
and dense
props enabled.
The amount of spacing between a media addon and the ListItem
content.
The default size for a media addon in the ListItem
component.
The default size for a large media addon in the ListItem
component.
The line-height
to apply to the secondary text within a ListItem
.
The max-height
to apply to the ListItem
secondary text which enables the line-clamp behavior.
The default keyline to apply to text content in a ListItem
when an icon or Avatar
are provided as addons. In other words, the text will be this distance from the left of the ListItem
.
This will also be the Divider
inset distance.
The default keyline to apply when the List
has dense mode enabled.
The available configurable css variables and mostly used internally for the
get-var
, set-var
, and use-var
utils.
The supported variable name
The value to set the variable to. Supports null
which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
Conditionally applies the css variables based on feature flags
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
a var()
statement
The supported variable name
An optional fallback value