Skip to content

csakaszamok/csak-tree

Repository files navigation

<csak-tree>

Published on webcomponents.org

Its just a tree. A tree view. A file tree. A menu tree. A tree for you.

The missing Polymer 2.x webcomponent.

Preview version!

Example 1

<csak-tree branchiconopen="vaadin:minus-square-o" branchicon="vaadin:plus-square-o" expanded>
  <csak-tree-item>Branch
    <csak-tree-item>Branch             
        <csak-tree-item>Leaf</csak-tree-item>
        <csak-tree-item>Leaf</csak-tree-item>
      </csak-tree-item>
      <csak-tree-item>Branch               
          <csak-tree-item>Leaf</csak-tree-item>
          <csak-tree-item>Leaf</csak-tree-item>
      </csak-tree-item>             
  </csak-tree-item>
</csak-tree>    

Example2

<csak-tree branchiconopen="vaadin:minus-square-o" branchicon="vaadin:plus-square-o"
data='{            
      "children ": [  
            {
              "name": "Branch",
              "children": [                     
                {
                  "name": "Branch",
                  "children": [                     
                  { 
                    "name": "Leaf"                        
                  },
                  {
                    "name": "Leaf"                        
                  }                      
                ]                           
                }   ,
                {
                  "name": "Branch",
                  "children": [                     
                  { 
                    "name": "Leaf"                        
                  },
                  {
                    "name": "Leaf"                        
                  }                      
                ]                           
                }                      
              ]
            }        
          ]
        }' expanded>
</csak-tree>    

Install with bower

First you need bower, see their site for details

bower install --save csak-tree

API documentation

Online API documentation

Styling

Custom property Description Default
--csak-tree-item-indent Items indent value 1em
--iron-icon-width Inherited css variable 16px

Use cases

  • menutree
  • classic treeview
  • custom tree
  • filetree

Menutree

Demo

Classic treeview

Demo

Demo

Events demo

Demo

Custom tree

Demo

Filetree

Demo

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

About

Its just a tree. A tree view. A file tree. A menu tree. A tree for you. The missing Polymer 2.x webcomponent.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published