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

Variables

rmd-tree-max-depth

Number

The default max-depth to create for the tree depths. This is used in the rmd-tree-depths mixin to generate offsets in css based on how deep a tree item is. If this value is less than or equal to 1, no depth styles will be created.

$rmd-tree-max-depth: 3 !default;

rmd-tree-item-padding-incrementor

Number

The amount of padding that should be multiplied by the current depth and added to the rmd-tree-item-padding-base.

$rmd-tree-item-padding-incrementor: $rmd-list-item-horizontal-padding * 1.5 !default;
See also

rmd-tree-item-padding-base

Number

The base amout of padding to apply to a tree item that has a depth greater than 1. This is set to a value that assumes you have icons to the left of the items at the base level. If you do not, it would be better to set this value to something smaller or $rmd-list-item-horizontal-padding * 2.5.

$rmd-tree-item-padding-base: $rmd-list-item-text-keyline !default;
See also

rmd-tree-item-focused-styles

Map

The styles to apply when a tree item gains focus. These styles will be applied even after a touch or mouse click.

$rmd-tree-item-focused-styles: () !default;

rmd-tree-item-keyboard-focused-styles

Map

The styles to apply to a tree item that is focused while in keyboard mode only. If you want to apply focus styles for all modes, use the $rmd-tree-item-focused-styles instead and set this value to null or an empty Map ().

$rmd-tree-item-keyboard-focused-styles: (
  box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;
See also

rmd-tree-theme-values

Map

A Map of all the "themeable" parts of the tree 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-tree-theme-values: (
  incrementor: $rmd-tree-item-padding-incrementor,
  base-padding: $rmd-tree-item-padding-base,
) !default;

Mixins

rmd-tree-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

One of the keys of rmd-tree-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-tree-theme-values map when null.

Color|String|Numbernull

rmd-tree-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-tree-depths

mixin

Creates the styles for all the depths from the provided min and max values for a tree.

Parameters
NameDescriptionTypeDefault Value
$selector-prefix

An optional prefix to apply before the aria-level selector. This should be set to ':global ' when using CSS Modules since it relies on global .rmd-tree-item__content class names.

String''
$min

The min level to use. This needs to be a number greater than 0.

Number1
$max

The max number of levels to create styles for.

Number$rmd-tree-max-depth
$incrementor

The amount of padding to be used for each level of depth.

Number$rmd-tree-item-padding-incrementor
$base

The base amount of padding that should be added to a tree item.

Number$rmd-tree-item-padding-base
Throws
  • Invalid min value: \
  • Invalid max value: \

Examples

Simple Usage
.tree {
  @include rmd-tree-depths($max: 2, $base-padding: 2rem);
}
CSS Modules Usage
.tree {
  @include rmd-tree-depths(
    $selector-prefix: ':global ',
    $max: 2,
    $base-padding: 2rem
  );
}

rmd-tree-item-at-depth

mixin

Creates styles to add additional padding to tree items based on depth. This will only work if you correctly apply the aria-level attributes to the list items.

The formula used for creating padding is:

$padding: (($depth - 1) * $incrementor) + $base;
Parameters
NameDescriptionTypeDefault Value
$depth

The depth to create styles for.

Number
$selector-prefix

An optional prefix to apply before the aria-level selector. This should be set to ':global ' when using CSS Modules since it relies on global .rmd-tree-item__content class names.

String''
$incrementor

The amount of padding to be used for each level of depth.

Number$rmd-tree-item-padding-incrementor
$base

The base amount of padding that should be added to a tree item.

Number$rmd-tree-item-padding-base

rmd-tree

mixin

Creates all the styles for a tree.

rmd-tree-item

mixin

Creates the styles for a tree item. This really requires the @react-md/list styles to be created beforehand since these styles just prevent the outline when focused to work with the @react-md/states package.

Examples

Example Usage SCSS
.rmd-tree-item {
  @include rmd-tree-item;
}

rmd-tree-group

mixin

Creates the styles for the tree group.

Examples

Example Usage SCSS
.rmd-tree-group {
  @include rmd-tree-group;
}

react-md-tree

mixin

Creates all the styles for a tree

Functions

rmd-tree-theme

function

This function is used to quickly get one of the tree's theme values. This is really just for the rmd-tree-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 tree's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-tree-theme-var

function

This function is used to get one of the tree'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-tree-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 tree's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-tree-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