I have been playing around with my react project and I am trying to replicate my checkbox tree design. (I have linked the image).
I have a nice jsfiddle of a working solution, however, I am really struggling to see how I can use this in my project. Because I will need to dynamically generate my tree.
Is it possible to use this code to dynamically generate a tree and replicate my design?
I feel like the Pseudo styling will be tough to deal with if I map my data.
My data will look like this:
[
{
value: 1,
data: "data",
children: [],
},
{
value: 2,
data: "data2",
children: [],
},
{
value: 3,
data: "data3",
children: [
{
value: 1,
data: "data",
children: [],
},
],
},
];
code:
.what {
margin-right: 15px;
}
ul.tree,
ul.tree ul {
padding-bottom: 5px;
list-style: none;
margin: 0;
padding-left: 0;
}
ul.tree ul {
margin-top: 5px;
margin-left: 20px;
}
ul.tree li {
padding-bottom: 5px;
margin-left: 0.60em;
border-left: thin solid #000;
}
ul.tree li:last-child {
border-left: none;
}
ul.tree li:before {
width: 0.9em;
height: 0.6em;
margin-right: 0.1em;
vertical-align: top;
border-bottom: thin solid #000;
content: "";
display: inline-block;
}
ul.tree li:last-child:before {
border-left: thin solid #000;
}
<ul class="tree"><input class="what" type="checkbox" />Root</ul>
<ul class="tree">
<li><input class="what" type="checkbox" /> Animals </li>
<li><input class="what" type="checkbox" /> Animals
<ul class="tree">
<li><input class="what" type="checkbox" /> Animals </li>
</ul>
</li>
</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>
Aucun commentaire:
Enregistrer un commentaire