Tags
With tags option you can:
- Set specific template for tagged nodes
- Set specific CSS for tagged nodes
- Set a specific node menu
Set specific template for tagged nodes.
Create the template:
FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.tommy);
FamilyTree.templates.myTemplate_female.node =
`<rect x="0" y="0" height="{h}" width="{w}" stroke-width="1" fill="rgb(255, 202, 40)" stroke="#aeaeae" rx="7" ry="7"></rect>`;
Create a tag in the family configuration:
tags: {
Mom: {
template: "myTemplate_female"
}
},
Use the tag in the node data:
{ id: 1, pids: [2], name: "Amber McKenzie", gender: "female", tags: ["Mom"] },
Set specific CSS for tagged nodes.
For the bellow tag in the data:
{ id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", tags: ["green"] }
you can use this CSS:
svg.tommy .node.green.female rect{
fill: #00D3A5;
}
Create a node menu item:
tags:{
Mom: {
nodeMenu: {
details: { text: "Details" },
},
}
},
Add the tag in the data to use the custom nodeMenu:
{ id: 1, pids: [2], name: "Amber McKenzie", gender: "female", tags: ["Mom"] },
Set specific template for male or fimale nodes.
Create the template:
FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.tommy);
FamilyTree.templates.myTemplate_female.node =
`<rect x="0" y="0" height="{h}" width="{w}" stroke-width="1" fill="rgb(255, 202, 40)" stroke="#aeaeae" rx="7" ry="7"></rect>`;
Use the template for a specific gender:
tags: {
female: {
template: "myTemplate_female"
}
},