How to add a custom component?


1. In order to create a custom component you have to create an new js file in 'js/components/list' directory. For example "nav.js".
2. Open 'define.js' file from 'js/components/' directory
3. Add the name of your component (without 'js' extension) at the end of the arrya, actually it doesn't matter where you'll append the components name in the array because at the final point they all will be sorted alphabetically.

window.VSCustomComponents = ['foo', 'bar', 'nav'];
$(window).triggerHandler('componentsReady');

4. Now you are almost done, all we have to do is to describe the component. Start doing it in the 'nav.js' you've already created. You can use the boilerplate below.

VSComponents.add({
    title: "Navigation", // The title of your component.  
    form: { // The form wicth will fetch your data from the UI. All the recieved data will be used later in your template.
        inputList: [ // An array of inputs that will be generated in the VS Builder's UI.
            { // Describe your input 
                type: "text", // Input type
                tooltip: "Give a title to the navigation", // The tip that will apear on hover this input.
                label: "Navigation title", // The label of the input.
                dataName: "title" // This is the variable name that you'll use later in component's template.
            }
        ],
        align: true // A preset, it will append automatically some inputs to the 'inputList'.
    },
    template: [ // The template that will be rendered when the "Save changes" button will be clicked and all the data will be validated. VS Builder uses the underscore.js templates.
        // <%= aling %> - comes from your form prest.
        // <%= title %> - comes from defined input (dataName).
        "<p class='<%= align %>'><%= title %></p>"
    ].join('')
});
Tags: component, custom

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