Tree CSS API Reference

All Common CSS variables:

    Specific CSS variables for Tree styling:

    • --smart-tree-default-width: Tree default width.
    • --smart-tree-default-height: Tree default height.
    • --smart-tree-scroll-button-size: Tree scroll buttons size.
    • --smart-tree-lines-style: Default style of the connecting tree lines.
    • --smart-tree-indent: Defines the indent(hierarchy offset) size of the tree items.
    • --smart-tree-lines-color: Defines the color of the connecting lines.
    • --smart-tree-lines-width: Defines the width of the connecting lines.
    • --smart-tree-item-padding: Defines the padding of the tree items.
    • --smart-tree-item-vertical-offset: Defines the vertical offset of the tree items.
    • --smart-tree-item-horizontal-offset: Defines the horizontal offset of the tree items.

    The following CSS selectors can be used to style Tree:

    • smart-tree - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - not used for styling.
        • .smart-filter-input - applied to an HTML Input element used for the filter input.
        • .smart-tree-scroll-button .smart-spin-button .smart-scroll-button-near- applied to the near scroll button.
          • .smart-arrow .smart-arrow-up - uses to set the arrow icon for the button.
        • smart-scroll-viewer - smartScrollViewer element. Used to controll element's scrollbars.
          • .smart-tree-main-container - an HTML container that holds the tree groups and items.
        • smart-tree-items-group - smartTreeItemGroup element. Used as container for smartTreeItem elements.
          • .smart-tree-item-label-container - used as a container for the item groups' label and arrow.
            • .smart-tree-item-label-element - the actual label of the item group.
            • .smart-tree-items-group-arrow - used for the arrow icon.
          • .smart-tree-drop-down - used as toggable container with items
            • .smart-tree-item-container - applied to the actual item's container'
              • smart-tree-item - smartTreeItem element.
            • .smart-tree-item-label-container - applied to the label container of the item.
              • smart-tree-item-label-element - applied to the label of the item.
        • .smart-tree-edit-input - an input element used for item editing.
        • .smart-tree-scroll-button .smart-spin-button .smart-scroll-button-far- applied to the far scroll button.
          • .smart-arrow .smart-arrow-down - uses to set the arrow icon for the button.
        • .smart-loader-container- applied to the container for the loading indicator.
          • .smart-loader- applied to the loading indicator.
          • .smart-loader-label- applied to the label for the loading indicator.

    Demo

    <style>
        #tree{
                --smart-color: #ccc;
                --smart-font-size: 20px;
        }
</style>