formaddons.vue

<template>
    <form>
        <div class="block">
            <p class="title is-6">Basic Addon</p>
            <g-field has-addons>
                <g-input placeholder="default addon" />
                <div class="control">
                    <g-button type="info">Ok</g-button>
                </div>
            </g-field>
        </div>
        <div class="block">
            <p class="title is-6">Static Addon</p>
            <g-field has-addons>
                <g-input placeholder="static addon" />
                <div class="control">
                    <g-button type="static">Ok</g-button>
                </div>
            </g-field>
        </div>
        <div class="block">
            <div class="block">
                <p class="title is-6">Using with <span class="tag">is-expanded</span> attributes</p>
                <g-field has-addons>
                    <g-input is-expanded placeholder="expanded attribute" />
                    <div class="control">
                        <g-button type="info">Ok</g-button>
                    </div>
                </g-field>
                <g-field has-addons type="info">
                    <g-select value="$">
                        <option>$</option>
                        <option>£</option>
                        <option>€</option>
                    </g-select>
                    <g-input is-expanded placeholder="some advanced expanded attribute" />
                    <div class="control">
                        <g-button type="info">Ok</g-button>
                    </div>
                </g-field>
            </div>
            <div class="block">
                <p class="title is-6">Using <span class="tag">is-expanded</span> on g-select component</p>
                <g-field has-addons type="success">
                    <g-select placeholder="Choose one" is-expanded is-fullwidth>
                        <option value="darth vader">Darth vader</option>
                        <option value="darth maul">Darth maul</option>
                        <option value="darth sidious">Darth sidious</option>
                        <option value="kylo ren">Kylo ren</option>
                    </g-select>
                    <div class="control">
                        <g-button type="success">Ok</g-button>
                    </div>
                </g-field>
            </div>
            <div class="block">
                <p class="title is-6">Applying addon with position</p>
                <g-field position="centered" has-addons>
                    <g-input placeholder="centered addon" />
                    <div class="control">
                        <g-button type="static">Ok</g-button>
                    </div>
                </g-field>
                <g-field position="right" has-addons>
                    <g-input placeholder="right addon" />
                    <div class="control">
                        <g-button type="static">Ok</g-button>
                    </div>
                </g-field>
            </div>
        </div>
    </form>
</template>