1.2.4 • Published 8 months ago

@maggioli-design-system/mds-tree v1.2.4

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

mds-tree

Properties

PropertyAttributeDescriptionTypeDefault
actionsactionsShow actions on the every tree item on hover or by default."auto" \| "visible" \| undefined'auto'
appearanceappearanceSpecifies if the branches depth decorations are visible."depth" \| "none"'depth'
asyncasyncSpecifies the tree should be opened asynchronously when after the click, .boolean \| undefinedundefined
expandedexpandedSpecifies if the tree is expanded.boolean \| undefinedundefined
labellabelSpecifies the selector of the target element, this attribute is used with querySelector method.stringundefined
toggletoggleSpecifies the toggle icon of the element"chevron" \| "folder"'chevron'
togglePositiontoggle-positionSpecifies the toggle icon position of the element"left" \| "right"'left'
truncatetruncateTruncate the text of the element on one single line."all" \| "none" \| "word"'word'

Slots

SlotDescription
"default"Add mds-tree-item element/s.

CSS Custom Properties

NameDescription
--mds-tree-actions-border-radiusSets the border-radius of the wrapper container of the actions.
--mds-tree-actions-gapSets the gap between the actions.
--mds-tree-branch-border-colorSets the border color of the tree branch.
--mds-tree-branch-border-sizeSets the border size of the tree branch.
--mds-tree-branch-dot-default-colorSets the default color of the tree branch dot.
--mds-tree-branch-dot-expanded-colorSets the color of the tree branch dot when the item is expanded.
--mds-tree-branch-use-rounded-borderSets the tree branch has rounded connectors or not, use it as a boolean value true or false.
--mds-tree-label-default-backgroundSets the default text color of the icon used at the near right of the label.
--mds-tree-label-hover-backgroundSets the background-color of the label when the mouse is over the item.
--mds-tree-label-icon-default-colorSets the default text color of the icon used at the near right of the label.
--mds-tree-label-icon-hover-colorSets the text color of the icon used at the near right of the label when the mouse is over the item.
--mds-tree-line-clampSets the number of lines to show before truncating the text, it only works when attribute truncate is set to all.
--mds-tree-toggle-gapSets the gap between the toggle icon and the label.
--mds-tree-toggle-icon-async-backgroundSets the background-color of the icon when the attribute async is set.
--mds-tree-toggle-icon-async-colorSets the text color of the icon when the attribute async is set.
--mds-tree-toggle-icon-chevron-default-backgroundSets the background-color of the chevron icon when the item is collapsed.
--mds-tree-toggle-icon-chevron-default-colorSets the text color of the chevron icon when the item is collapsed.
--mds-tree-toggle-icon-chevron-expanded-backgroundSets the background-color of the chevron icon when the item is expanded.
--mds-tree-toggle-icon-chevron-expanded-colorSets the text color of the chevron icon when the item is expanded.
--mds-tree-toggle-icon-folder-default-backgroundSets the background-color of the folder icon when the item is collapsed.
--mds-tree-toggle-icon-folder-default-colorSets the text color of the folder icon when the item is collapsed.
--mds-tree-toggle-icon-folder-expanded-backgroundSets the background-color of the folder icon when the item is expanded.
--mds-tree-toggle-icon-folder-expanded-colorSets the text color of the folder icon when the item is expanded.
--mds-tree-toggle-icon-position-right-default-backgroundSets the background-color of the icon when the attribute toggle-position is set to right.
--mds-tree-toggle-icon-position-right-default-colorSets the text color of the icon when the attribute toggle-position is set to right.
--mds-tree-toggle-icon-position-right-expanded-backgroundSets the background-color of the icon when the attribute toggle-position is set to right and the item is expanded.
--mds-tree-toggle-icon-position-right-expanded-colorSets the text color of the icon when the attribute toggle-position is set to right and the item is expanded.
--mds-tree-transition-durationSets the duration of the transition effect.
--mds-tree-transition-timing-functionSets the timing function of the transition effect.

Built with love @ Gruppo Maggioli from R&D Department

1.2.4

8 months ago

1.2.3

9 months ago

1.2.2

10 months ago

1.2.1

11 months ago

1.2.0

11 months ago

1.1.0

11 months ago

1.0.0

12 months ago