formgroups.vue

<template>
    <form>
        <div class="block">
            <p class="title is-6">Adjust position of grouped component</p>
            <g-field is-grouped>
                <div class="control">
                    <g-button type="primary">Submit</g-button>
                </div>
                <div class="control">
                    <g-button type="light">Cancel</g-button>
                </div>
            </g-field>
            <g-field position="centered" is-grouped>
                <div class="control">
                    <g-button type="primary">Submit</g-button>
                </div>
                <div class="control">
                    <g-button type="light">Cancel</g-button>
                </div>
            </g-field>
            <g-field position="right" is-grouped>
                <div class="control">
                    <g-button type="primary">Submit</g-button>
                </div>
                <div class="control">
                    <g-button type="light">Cancel</g-button>
                </div>
            </g-field>
        </div>
        <div class="block">
            <p class="title is-6">Using with input</p>
            <g-field is-grouped>
                <g-input placeholder="Find username"></g-input>
                <div class="control">
                    <g-button type="info">Find</g-button>
                </div>
            </g-field>
            <g-field is-grouped>
                <g-input placeholder="Find username" is-expanded></g-input>
                <div class="control">
                    <g-button type="info">Find</g-button>
                </div>
            </g-field>
        </div>
        <div class="block">
            <p class="title is-6">Using props <span class="tag">is-grouped-multiline</span> to allow
                controls to fill up multiple lines</p>
            <g-field is-grouped is-grouped-multiline>
                <div class="control">
                    <g-button>One</g-button>
                </div>
                <div class="control">
                    <g-button>Two</g-button>
                </div>
                <div class="control">
                    <g-button>Three</g-button>
                </div>
                <div class="control">
                    <g-button>Four</g-button>
                </div>
                <div class="control">
                    <g-button>Five</g-button>
                </div>
                <div class="control">
                    <g-button>Six</g-button>
                </div>
                <div class="control">
                    <g-button>Seven</g-button>
                </div>
                <div class="control">
                    <g-button>Eight</g-button>
                </div>
                <div class="control">
                    <g-button>Nine</g-button>
                </div>
                <div class="control">
                    <g-button>Ten</g-button>
                </div>
            </g-field>
        </div>
    </form>
</template>