TK.Interface

A ready to use interface with menu items, headers and responsive support.

Example

{
    _: TK.Interface,
    style: {
        height: "250px",
        overflow: "auto"
    },
    CurrentUserTemplate: { innerHTML: "John Smith" },
    CurrentLogoTemplate: { innerHTML: "Application 1" },
    Embedded: true, // Set to false when adding it to the body element

    Content: {
        Index: {
            Name: "Page 1",
            Icon: Svg.Icons.Home,
            Template: {
                innerHTML: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />"+
                    "Suspendisse felis nibh, elementum sit gravida eget, volutpat eu nisl.<br />"+
                    "Integer lobortis lacinia augue sit amet pharetra.<br />"+
                    "Quisque rutrum tortor nec odio finibus feugiat eu eget urna.<br />"+
                    "Sed dolor lectus, hendrerit vel sem eget, finibus pellentesque urna.<br />"+
                    "Sed semper maximus nisi, sit amet blandit purus suscipit vel.<br />"+
                    "Nam tincidunt purus eu erat ullamcorper scelerisque.<br />"+
                    "Suspendisse eget sapien ut leo vulputate lobortis.<br />"+
                    "Praesent enim enim, mattis quis tincidunt non, tempor vel sapien.<br />"+
                    "Nam et vestibulum felis.<br />"+
                    "Etiam placerat ultricies mauris, commodo sagittis ex ullamcorper ac.<br />"+
                    "Nunc scelerisque metus nibh."
            }   
        },
        Page2: {
            Name: "Page 2",
            Icon: Svg.Icons.Settings,
            Template: {
                innerHTML: "This is the contents of the second page"
            }
        },
        Page3: {
            Name: "Page 3",
            Icon: Svg.Icons.Dashboard,
            Content: {
                Index: {
                    Name: "Sub Page 1",
                    Icon: Svg.Icons.Find,
                    Template: { 
                        innerHTML: "This is the contents of a sub page"
                    }
                },
                SubPage2: {
                    Name: "Sub Page 2",
                    Icon: Svg.Icons.Download,
                    Template: { 
                        innerHTML: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />"+
                            "Suspendisse felis nibh, elementum sit gravida eget, volutpat eu nisl.<br />"+
                            "Integer lobortis lacinia augue sit amet pharetra.<br />"+
                            "Quisque rutrum tortor nec odio finibus feugiat eu eget urna.<br />"+
                            "Sed dolor lectus, hendrerit vel sem eget, finibus pellentesque urna.<br />"+
                            "Sed semper maximus nisi, sit amet blandit purus suscipit vel.<br />"+
                            "Nam tincidunt purus eu erat ullamcorper scelerisque.<br />"+
                            "Suspendisse eget sapien ut leo vulputate lobortis.<br />"+
                            "Praesent enim enim, mattis quis tincidunt non, tempor vel sapien.<br />"+
                            "Nam et vestibulum felis.<br />"+
                            "Etiam placerat ultricies mauris, commodo sagittis ex ullamcorper ac.<br />"+
                            "Nunc scelerisque metus nibh."
                    }
                }
            }
        }
    }
}