{"_id":"598622fad09433000f1b97f3","category":{"_id":"598622f9d09433000f1b97de","version":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-15T07:28:09.870Z","from_sync":false,"order":0,"slug":"getting-started","title":"Basic"},"project":"5707c6875309d117006948d4","parentDoc":null,"user":"54d742a80771980d0052f4b5","version":{"_id":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-08-05T19:56:41.267Z","releaseDate":"2017-08-05T19:56:41.267Z","categories":["598622f9d09433000f1b97de","598622f9d09433000f1b97df","598622f9d09433000f1b97e0","598622f9d09433000f1b97e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.1.0","version":"4.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-04-09T12:11:12.489Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"The tree comes with very basic style.\nThe following classes are available for customization:\n\n* .tree\n* .tree-node\n* .tree-node-wrapper\n* .tree-node-expanded\n* .tree-node-collapsed\n* .tree-node-focused\n* .tree-node-active\n* .tree-node-level-X\n* .tree-node-leaf\n* .node-wrapper\n* .toggle-children-wrapper\n* .toggle-children\n* .toggle-children-placeholder\n* .node-content-wrapper\n* .tree-children\n* .tree-node-loading\n* .node-drop-slot\n* .is-dragging-over\n* .is-dragging-over-disabled\n\n\n[block:api-header]\n{\n  \"title\": \"Overriding style\"\n}\n[/block]\nSurround your tree with a class, and add your custom style to your `style.scss` file.\nScope all the custom rules under your custom class - and that's it!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example styles\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Branch lines\"\n}\n[/block]\nThis theme puts explorer like branch lines that connect the parents with their children\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f50955b-Screen_Shot_2016-11-29_at_12.11.52_PM.png\",\n        \"Screen Shot 2016-11-29 at 12.11.52 PM.png\",\n        366,\n        390,\n        \"#111111\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".node-content-wrapper, .tree-children {\\n  position: relative;\\n}\\n\\n.node-content-wrapper::before, .tree-children::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n}\\n\\n.node-content-wrapper::before {\\n  border-bottom: 1px solid lightgrey;\\n  border-left: 1px solid lightgrey;\\n  height: 28px;\\n  top: -17px;\\n  width: 20px;\\n  left: -28px;\\n}\\n\\n.tree-node-leaf > .node-wrapper > .node-content-wrapper::before {\\n  width: 25px;\\n}\\n\\n.tree-children::after {\\n  border-left: 1px solid lightgrey;\\n  height: 100%;\\n  top: -15px;\\n  left: -15px;\\n}\\n\\ntreenode:last-child > .tree-node > .tree-children::after {\\n  border-left: none;\\n}\\n\\n.toggle-children {\\n  z-index: 1;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Pull right\"\n}\n[/block]\nThis theme allows placing items in the right side of the tree nodes using `pull-right` class.\nIt is based on flexbox, so relevant only to browsers who support it\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/28d7625-Screen_Shot_2016-11-29_at_12.11.01_PM.png\",\n        \"Screen Shot 2016-11-29 at 12.11.01 PM.png\",\n        710,\n        414,\n        \"#181818\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".tree {\\n  width: 300px;\\n}\\n\\n.node-content-wrapper {\\n  display: flex;\\n  flex-wrap: wrap;\\n  align-items: baseline;\\n}\\n\\n.node-content-wrapper {\\n  flex-grow: 1;\\n  position: relative;\\n}\\n\\n.pull-right {\\n  position: absolute;\\n  right: 10px;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"ACE Admin theme\"\n}\n[/block]\n[ACE Admin theme](http://ace.jeka.by/treeview.html) style.\nCredit to Viet Anh Do for sending this theme!\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0bd50e1-treecss.png\",\n        \"treecss.png\",\n        230,\n        462,\n        \"#efddb3\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"div.tree div.tree-children::before,\\ndiv.tree::before {\\n    content: \\\"\\\";\\n    position: absolute;\\n    border-left: 1px dotted #23527c;\\n    height: 100%;\\n    top: -14px;\\n    left: 12px\\n}\\n\\ndiv.tree {\\n    padding-left: 0;\\n    margin-left: -5px\\n}\\n\\ndiv.tree div.tree-children {\\n    position: relative;\\n    padding-left: 0;\\n    margin-left: 16px\\n}\\n\\ndiv.tree div.tree-children::before {\\n    left: 5px\\n}\\n\\ndiv.tree treenode>div>.node-wrapper {\\n    margin-left: 24px\\n}\\n\\ndiv.tree treenode>div>.node-wrapper>.node-content-wrapper {\\n    margin-left: 4px\\n}\\n\\ndiv.tree treenode>div.tree-node-leaf>.node-wrapper {\\n    margin-left: 0\\n}\\n\\ndiv.tree treenode>div::before {\\n    content: \\\"\\\";\\n    position: absolute;\\n    border-bottom: 1px dotted #23527c;\\n    width: 7px;\\n    margin-top: 12px;\\n    left: 7px\\n}\\n\\ndiv.tree treenode>div .toggle-children-wrapper {\\n    width: 13px;\\n    height: 13px;\\n    border: 1px solid #23527c;\\n    position: absolute;\\n    left: 15px;\\n    margin-top: 5px;\\n    margin-left: 0;\\n    display: inline-block;\\n    background-color: #fff;\\n    z-index: 1\\n}\\n\\ndiv.tree treenode>div .toggle-children-wrapper::before {\\n    content: \\\"\\\";\\n    display: inline-block;\\n    width: 7px;\\n    border-top: 1px solid #23527c;\\n    position: absolute;\\n    top: 5px;\\n    left: 2px\\n}\\n\\ndiv.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {\\n    content: \\\"\\\";\\n    display: inline-block;\\n    height: 7px;\\n    border-left: 1px solid #23527c;\\n    position: absolute;\\n    top: 2px;\\n    left: 5px\\n}\\n\\ndiv.tree treenode>div .toggle-children-wrapper .toggle-children {\\n    display: none\\n}\\n\\ndiv.tree treenode>div .node-content-wrapper {\\n    margin-left: 4px\\n}\\n\\ndiv.tree>treenode>div::before {\\n    left: 14px\\n}\\n\\ndiv.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {\\n    left: 22px\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Send me your theme\"\n}\n[/block]\nIf you've created a nice style for the tree, I will appreciate if you send me and I will showcase it here and give you credit.\nYou can suggest an edit using the top right link.","excerpt":"","slug":"styling","type":"basic","title":"Styling"}
The tree comes with very basic style. The following classes are available for customization: * .tree * .tree-node * .tree-node-wrapper * .tree-node-expanded * .tree-node-collapsed * .tree-node-focused * .tree-node-active * .tree-node-level-X * .tree-node-leaf * .node-wrapper * .toggle-children-wrapper * .toggle-children * .toggle-children-placeholder * .node-content-wrapper * .tree-children * .tree-node-loading * .node-drop-slot * .is-dragging-over * .is-dragging-over-disabled [block:api-header] { "title": "Overriding style" } [/block] Surround your tree with a class, and add your custom style to your `style.scss` file. Scope all the custom rules under your custom class - and that's it! [block:api-header] { "type": "basic", "title": "Example styles" } [/block] [block:api-header] { "type": "basic", "title": "Branch lines" } [/block] This theme puts explorer like branch lines that connect the parents with their children [block:image] { "images": [ { "image": [ "https://files.readme.io/f50955b-Screen_Shot_2016-11-29_at_12.11.52_PM.png", "Screen Shot 2016-11-29 at 12.11.52 PM.png", 366, 390, "#111111" ] } ] } [/block] [block:code] { "codes": [ { "code": ".node-content-wrapper, .tree-children {\n position: relative;\n}\n\n.node-content-wrapper::before, .tree-children::after {\n content: \"\";\n position: absolute;\n}\n\n.node-content-wrapper::before {\n border-bottom: 1px solid lightgrey;\n border-left: 1px solid lightgrey;\n height: 28px;\n top: -17px;\n width: 20px;\n left: -28px;\n}\n\n.tree-node-leaf > .node-wrapper > .node-content-wrapper::before {\n width: 25px;\n}\n\n.tree-children::after {\n border-left: 1px solid lightgrey;\n height: 100%;\n top: -15px;\n left: -15px;\n}\n\ntreenode:last-child > .tree-node > .tree-children::after {\n border-left: none;\n}\n\n.toggle-children {\n z-index: 1;\n}", "language": "css" } ] } [/block] [block:api-header] { "type": "basic", "title": "Pull right" } [/block] This theme allows placing items in the right side of the tree nodes using `pull-right` class. It is based on flexbox, so relevant only to browsers who support it [block:image] { "images": [ { "image": [ "https://files.readme.io/28d7625-Screen_Shot_2016-11-29_at_12.11.01_PM.png", "Screen Shot 2016-11-29 at 12.11.01 PM.png", 710, 414, "#181818" ] } ] } [/block] [block:code] { "codes": [ { "code": ".tree {\n width: 300px;\n}\n\n.node-content-wrapper {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n}\n\n.node-content-wrapper {\n flex-grow: 1;\n position: relative;\n}\n\n.pull-right {\n position: absolute;\n right: 10px;\n}", "language": "css" } ] } [/block] [block:api-header] { "title": "ACE Admin theme" } [/block] [ACE Admin theme](http://ace.jeka.by/treeview.html) style. Credit to Viet Anh Do for sending this theme! [block:image] { "images": [ { "image": [ "https://files.readme.io/0bd50e1-treecss.png", "treecss.png", 230, 462, "#efddb3" ] } ] } [/block] [block:code] { "codes": [ { "code": "div.tree div.tree-children::before,\ndiv.tree::before {\n content: \"\";\n position: absolute;\n border-left: 1px dotted #23527c;\n height: 100%;\n top: -14px;\n left: 12px\n}\n\ndiv.tree {\n padding-left: 0;\n margin-left: -5px\n}\n\ndiv.tree div.tree-children {\n position: relative;\n padding-left: 0;\n margin-left: 16px\n}\n\ndiv.tree div.tree-children::before {\n left: 5px\n}\n\ndiv.tree treenode>div>.node-wrapper {\n margin-left: 24px\n}\n\ndiv.tree treenode>div>.node-wrapper>.node-content-wrapper {\n margin-left: 4px\n}\n\ndiv.tree treenode>div.tree-node-leaf>.node-wrapper {\n margin-left: 0\n}\n\ndiv.tree treenode>div::before {\n content: \"\";\n position: absolute;\n border-bottom: 1px dotted #23527c;\n width: 7px;\n margin-top: 12px;\n left: 7px\n}\n\ndiv.tree treenode>div .toggle-children-wrapper {\n width: 13px;\n height: 13px;\n border: 1px solid #23527c;\n position: absolute;\n left: 15px;\n margin-top: 5px;\n margin-left: 0;\n display: inline-block;\n background-color: #fff;\n z-index: 1\n}\n\ndiv.tree treenode>div .toggle-children-wrapper::before {\n content: \"\";\n display: inline-block;\n width: 7px;\n border-top: 1px solid #23527c;\n position: absolute;\n top: 5px;\n left: 2px\n}\n\ndiv.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {\n content: \"\";\n display: inline-block;\n height: 7px;\n border-left: 1px solid #23527c;\n position: absolute;\n top: 2px;\n left: 5px\n}\n\ndiv.tree treenode>div .toggle-children-wrapper .toggle-children {\n display: none\n}\n\ndiv.tree treenode>div .node-content-wrapper {\n margin-left: 4px\n}\n\ndiv.tree>treenode>div::before {\n left: 14px\n}\n\ndiv.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {\n left: 22px\n}", "language": "css" } ] } [/block] [block:api-header] { "type": "basic", "title": "Send me your theme" } [/block] If you've created a nice style for the tree, I will appreciate if you send me and I will showcase it here and give you credit. You can suggest an edit using the top right link.