Button

Button
Button
  • Hello!
  • Bazinga!
  • Hello!
  • Bazinga!
  • {% view "@button" with {
        button: {
            id: {
                this: ""
            },
            class: {
                this: "",
                value: ""
            },
            style: "",
            href: "",
            attrs: "",
            text: "",
            icon: {
                class: "",
                path: "icon/arrow",
                orientation: 'right',
                size: 13
            },
            icon_position_right: true,
            count: {
                class: "",
                value: 24
            }
        }
    } %}
    {% view "@button" with {
        button: {
            class: {
                this: ""
            },
            style: "",
            href: "",
            text: ""
        }
    } %}
    {% view "@button" with {
        button: {
            btn_icon: true,
            style: "transparent",
            icon: {
                path: ""
            }
        }
    } %}

    Icon

    {% view "@icon" with {
        icon: {
            class: "",
            path: "icon/arrow",
            orientation: "",
            size: 13
        }
    } %}

    Field

    test
    test
    test
    Lorem, ipsum.
    Lorem, ipsum.
    Lorem, ipsum.
    {% view "@field" with {
        field: {
            invisible: false,
            element: "",
            is_container_div: false,
            id: {
                this: "",
                input: ""
            },
            class: {
                this: "",
                inner: "",
                input: ""
            },
            style: "",
            inverse: false,
            width: "",
            height: "",
            type: "",
            name: "",
            min: "",
            max: "",
            placeholder: "",
            value: "",
            unit: "",
            checked: "",
            attrs: {
                this: "",
                input: ""
            },
            title: "",
            options: [],
            icon: {
                class: "",
                path: "icon/arrow",
                orientation: 'right',
                size: 12
            },
            icon_position_right: true,
        }
    } %}
    {% view "@field" with {
        field: {
            element: "text",
            class: {
                this: ""
            },
            title: "",
            text: ""
        }
    } %}

    Title

    Title

    {% view "@title" with {
        title: {
            level: 5,
            class: "",
            attrs: "",
            text: ""
        }
    } %}

    Tabs

    {% view "^tabs" with {
        tabs: {
            style: "",
            items: [{
                text: ""
            }, {
                active: true,
                text: ""
            }]
        }
    } %}

    Timer

    21.12.2021
    13:45
    01.01.2022
    03:24
    До завершения
    1 д 12 ч 15 мин 28 сек
    {% view "^timer" with {
        timer: {
            class: {
                this: ""
            },
            start: {
                milliseconds: "",
                date: "",
                time: ""
            },
            end: {
                milliseconds: "",
                date: "",
                time: ""
            },
            cooldown: {
                status: "",
                text: "",
                time: ""
            }
        }
    } %}

    Leader

    Property
    Value
    Property
    Value
    Property
    {% view "@leader" with {
        leader: {
            class: {
                wrap: "",
                block: "",
                items: ""
            },
            attrs: "",
            property: "Property",
            value: "Value"
        }
    } %}
    {% view "^leader_block" with {
        leader_block: {
            class: {
                this: "",
                items: {
                    this: "",
                    property: "",
                    value: ""
                }
            },
            items: [{
                class: {
                    this: "",
                    property: "",
                    value: ""
                },
                property: "Property",
                value: "Value"
            }, {
                property: "Property",
                value: [{
                    button: {
                        style: "link-2",
                        text: "Value"
                    }
                }]
            }]
        }
    } %}

    Counter

    Table

    {% view "@table" with {
        table: {
            class: {
                this: ""
            },
            thead: ['Title', 'Title',
                'Title', 'Title'],
            tbody: [{
                tds: [{
                    text: "Text"
                }, {
                    text: "Text1"
                }, {
                    text: "Text2"
                }, {
                    allitems: [{
                        button: {
                            text: "Button"
                        }
                    }]
                }]
            }]
        }
    } %}