How CSS works?


In order to create some CSS for your custom components you have to use your predefined inputs. Take a look at the example below.

VSComponents.add({
    title: "Text",
    form: {
        inputList: [
            {
                type: "textarea",
                tooltip: "Enter your text",
                label: "Text",
                dataName: "text", // This input will be rendered in your template.
                important: true
            },
            {
                type: "text",
                tooltip: "Pick a color for the text",
                label: "Text color",
                dataName: "textColor", // And this one in your css code.
                dataType: "color"
            }
        ]
    },
    template: [
        "<section>",
            "<div class='text'><%= text %></div>",
        "</section>",
    ].join(""),

    css: [ // Array - list of selectors.
        {
            selector: ".text", // String - make a selection on your component and don't worry about scoping the component, VS Builder will scope it for you with the parent's unique class.
            properties  : [ // Array - the list of css properties on the same selector.
                {
                    name    : "color", // String - a css property name such as: background-color, font-size, line-height, etc. 
                    value   : "textColor" // String - as value use the dataName of your input. Just make sure that your input will return the value that your css property name will expect.
                }
            ] 
        }
    ]
});
Tags: css, custom, templates

Last update:
2014-11-22 12:38
Author:
Vlad Sargu
Revision:
1.0
Average rating: 5 (1 Vote)