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;
}


Set node menu items for tagged nodes. See Menus for more details.

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"
        }
    },
In this article