Tree CSS API Reference

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

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-font-family:Tree font family.
  • --smart-tree-font-size: Tree font size.
  • --smart-tree-border-top-right-radius: Tree top-right border radius.
  • --smart-tree-border-top-left-radius: Tree top-left border radius.
  • --smart-tree-border-bottom-left-radius: Tree bottom-left border radius.
  • --smart-tree-border-bottom-right-radius: Tree bottom-right border radius.
  • --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-background: Defines the background of the tree.
  • --smart-tree-border: Defines the border color of the tree.
  • --smart-tree-border-width: Defines the border width of the tree.
  • --smart-tree-color: Defines the color of the tree.
  • --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.
  • --smart-tree-item-border-top-right-radius: Defines top-right border radius of the tree items.
  • --smart-tree-item-border-top-left-radius: Defines top-left border radius of the tree items.
  • --smart-tree-item-border-bottom-left-radius: Defines bottom-left border radius of the tree items.
  • --smart-tree-item-border-bottom-right-radius: Defines bottom-right border radius of the tree items.
  • --smart-tree-item-border-width: Defines a border width of the tree items.
  • --smart-tree-item-background: Defines a background color of the tree items.
  • --smart-tree-item-border: Defines a border color of the tree items.
  • --smart-tree-item-color: Defines the color of the tree items.
  • --smart-tree-item-background-hover: Defines a background color of the hovered tree items.
  • --smart-tree-item-border-hover: Defines a bborder color of the hovered tree items.
  • --smart-tree-item-color-hover: Defines the color of the hovered tree items.
  • --smart-tree-item-background-active: Defines a background color of the active tree items.
  • --smart-tree-item-border-active: Defines a border color of the active tree items.
  • --smart-tree-item-color-active: Defines the color of the active tree items.
  • --smart-tree-selection: Defines the background color of the selected tree items.
  • --smart-tree-selection-color: Defines the color of the selected 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>