What is a form preset?


What is a preset and how it affects your component's form? That's simple, during creating VS Builder we observed that there are some inputs that we include very often, so we thought why not to create some templates for them and call them when's needed. That will just speed up your workflow. The list of available presets is shown in the code below.

VSComponents.add({
    title: "",    
    form: {

        // Presets
        align: true, // Boolean
        margin: true, // Boolean
        padding: true, // Boolean
        borderRadius: true, // Boolean
        border: true, // Boolean
        themeColor: {
            tooltip: "Pick a color for your logo text", // String
            label: "Logo color" // String
        },
        textColor: {
            tooltip: "Pick a color for the articles text", // String
            label: "Text color" // String
        },
        background: {
            colorTooltip: "Set a background color for this section", // String
            imageTooltip: "Set a background image for this section", // String
            path: "img/page/" // String
        },
        columns: true // Boolean

    },
    template: [
        "<p></p>"
    ].join("")
});

Let's take a look at what each preset adds to the form.

align: {
    type: "select",
    tooltip: "Choose an alignment to this element",
    label: "Align element",
    dataName: "align",
    options: [
        {
            text: "align to left",
            value: "l-al",
            icon: "align left"
        },
        {
            text: "align to center",
            value: "l-ac",
            icon: "align center"
        },
        {
            text: "align to right",
            value: "l-ar",
            icon: "align right"
        }
    ]
},

margin: [
    {
        type: "text",
        tooltip: "Set margin top for this element(max: 1000, min: -1000)",
        label: "Margin top",
        dataName: "marginT",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "-1000",
        dataUnits: "px",
        dataGroup: "margin",
        icon: "arrow up"
    },
    {
        type: "text",
        tooltip: "Set margin bottom for this element(max: 1000, min: -1000)",
        label: "bottom",
        dataName: "marginB",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "-1000",
        dataUnits: "px",
        dataGroup: "margin",
        icon: "arrow down"
    },
    {
        type: "text",
        tooltip: "Set margin left for this element(max: 1000, min: -1000)",
        label: "left",
        dataName: "marginL",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "-1000",
        dataUnits: "px",
        dataGroup: "margin",
        icon: "arrow left"
    },
    {
        type: "text",
        tooltip: "Set margin right for this element(max: 1000, min: -1000)",
        label: "right",
        dataName: "marginR",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "-1000",
        dataUnits: "px",
        dataGroup: "margin",
        icon: "arrow right"
    }

],

padding: [
    {
        type: "text",
        tooltip: "Set padding top for this element(max: 1000, min: 0)",
        label: "Padding top",
        dataName: "paddingT",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "0",
        dataUnits: "px",
        dataGroup: "padding",
        icon: "arrow up"
    },
    {
        type: "text",
        tooltip: "Set padding bottom for this element(max: 1000, min: 0)",
        label: "bottom",
        dataName: "paddingB",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "0",
        dataUnits: "px",
        dataGroup: "padding",
        icon: "arrow down"
    },
    {
        type: "text",
        tooltip: "Set padding left for this element(max: 1000, min: 0)",
        label: "left",
        dataName: "paddingL",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "0",
        dataUnits: "px",
        dataGroup: "padding",
        icon: "arrow left"
    },
    {
        type: "text",
        tooltip: "Set padding right for this element(max: 1000, min: 0)",
        label: "right",
        dataName: "paddingR",
        dataType: "spinner",
        dataMax: "1000",
        dataMin: "0",
        dataUnits: "px",
        dataGroup: "padding",
        icon: "arrow right"
    }
],

borderRadius: {
    type: "text",
    tooltip: "Select border radius for your element in "px"",
    label: "Border radius",
    dataName: "borderRadius",
    dataType: "spinner",
    dataMax: "500",
    dataMin: "0",
    dataUnits: "px"
},

border: [
    {
        type: "checkbox",
        tooltip: "Check to add top border to this section",
        label: "Border top",
        dataName: "borderTop",
        ifChecked: "l-border-top",
        ifNotChecked: ""
    },
    {
        tooltip: "Pick a color for the border top",
        label: "Border top color",
        dataName: "borderTopColor",
        dataType: "color"
    },
    {
        type: "checkbox",
        tooltip: "Check to add bottom border to this section",
        label: "Border bottom",
        dataName: "borderBottom",
        ifChecked: "l-border-bottom",
        ifNotChecked: ""
    },
    {
        tooltip: "Pick a color for the border bottom",
        label: "Border bottom color",
        dataName: "borderBottomColor",
        dataType: "color"
    }
],

themeColor: {
    type: "text",
    tooltip: tooltip,
    label: label,
    dataName: "themeColor",
    dataType: "color"
},

textColor: {
    type: "text",
    tooltip: tooltip,
    label: label,
    dataName: "textColor",
    dataType: "color"
},

background: [
    {
        type: "text",
        tooltip: colorTooltip,
        label: "Background color",
        dataName: "backgroundColor",
        dataType: "color"
    },
    {
        type: "text",
        tooltip: imageTooltip,
        label: "Background image",
        dataName: "backgroundImage",
        dataType: "image",
        path: path
    },
    {
        type: "select",
        tooltip: "Select a repeat property for background image",
        label: "Background image repeat",
        dataName: "backgroundRepeat",
        options: [
            {
                text: "repeat image",
                value: "repeat"
            },
            {
                text: "dont repeat image",
                value: "no-repeat"
            },
            {
                text: "repeat image on x",
                value: "repeat-x"
            },
            {
                text: "repeat image on y",
                value: "repeat-y"
            }
        ]
    },
    {
        type: "select",
        tooltip: "Select horizontal align for background image",
        label: "Backgroun horizontal align",
        dataName: "backgroundAlignX",
        options: [
            {
                text: "Background align to left",
                value: "left"
            },
            {
                text: "Background align to center",
                value: "center"
            },
            {
                text: "Backgroun align to right",
                value: "right"
            }
        ]
    },
    {
        type: "select",
        tooltip: "Select vertical align for background image",
        label: "Backgroun vertical align",
        dataName: "backgroundAlignY",
        options: [
            {
                text: "Background align to top",
                value: "top"
            },
            {
                text: "Background align to middle",
                value: "center"
            },
            {
                text: "Background align to bottom",
                value: "bottom"
            }
        ]
    },
    {
        type: "select",
        tooltip: "Select size for background image",
        label: "Background size",
        dataName: "backgroundSize",
        options: [
            {
                text: "Background original size",
                value: "auto"
            },
            {
                text: "Background contain size",
                value: "contain"
            },
            {
                text: "Background cover",
                value: "cover"
            }
        ]
    },
    {
        type: "checkbox",
        tooltip: "This option will make your background parallax",
        label: "Parallax background",
        dataName: "parallax"
    }
],

columns: [
    {
        type: "select",
        tooltip: "Select the number of items in a single row on desktop devices",
        label: "Number of items in row on desktop",
        dataName: "largeColumns",
        options: [
            {
                text: "1 item in row",
                value: "large-12"
            },
            {
                text: "2 items in row",
                value: "large-6"
            },
            {
                text: "3 items in row",
                value: "large-4"
            },
            {
                text: "4 items in row",
                value: "large-3"
            }
        ]
    },
    {
        type: "select",
        tooltip: "Select the number of items in a single row",
        label: "Number of items in row on tablet",
        dataName: "mediumColumns",
        options: [
            {
                text: "1 item in row",
                value: "medium-12"
            },
            {
                text: "2 items in row",
                value: "medium-6"
            },
            {
                text: "3 items in row",
                value: "medium-4"
            },
            {
                text: "4 items in row",
                value: "medium-3"
            }
        ]
    },
    {
        type: "select",
        tooltip: "Select the number of items in a single row",
        label: "Number of items in row on mobile",
        dataName: "smallColumns",
        options: [
            {
                text: "1 item in row",
                value: "small-12"
            },
            {
                text: "2 items in row",
                value: "small-6"
            },
            {
                text: "3 items in row",
                value: "small-4"
            },
            {
                text: "4 items in row",
                value: "small-3"
            }
        ]
    }
]

Last update:
2014-11-22 12:30
Author:
Vlad Sargu
Revision:
1.1
Average rating:0 (0 Votes)