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;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;The base amount 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;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;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;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;Creates the styles for one of the tree's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | 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 | Color|String|Number | null |
Updates one of the tree's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The tree theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the styles for all the depths from the provided min and max values for a tree.
| Name | Description | Type | Default Value |
|---|---|---|---|
$selector-prefix | An optional prefix to apply before the | String | '' |
$min | The min level to use. This needs to be a number greater than 0. | Number | 1 |
$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 |
@use 'react-md' as *;
.tree {
@include rmd-tree-depths($max: 2, $base-padding: 2rem);
}
@use 'react-md' as *;
.tree {
@include rmd-tree-depths(
$selector-prefix: ':global ',
$max: 2,
$base-padding: 2rem
);
}
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;| Name | Description | Type | Default Value |
|---|---|---|---|
$depth | The depth to create styles for. | Number | — |
$selector-prefix | An optional prefix to apply before the | 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 |
Creates all the styles for a tree.
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.
@use 'react-md' as *;
.rmd-tree-item {
@include rmd-tree-item;
}
Creates the styles for the tree group.
@use 'react-md' as *;
.rmd-tree-group {
@include rmd-tree-group;
}
Creates all the styles for a tree
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.
Color|String|Numberone of the tree's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the tree's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |