Логотип слева, форма справа - PullRequest
Новая
       50

Логотип слева, форма справа

0 голосов
/ 30 апреля 2018

Я использую Bulma и Vue и пытаюсь создать заголовок для сайта, который состоит из логотипа слева и формы для входа справа.

Это дает мне логотип слева, а затем от конца логотипа до конца экрана справа, у меня есть элементы, показанные там.

Как мне делать то, что я хочу? Спасибо.

Template 

<header>
    <div class="navbar">
        <a class="navbar-brand" href="/">FreeSongs&trade;</a>
        <form class="navbar-menu" @submit.prevent="signin" accept-charset="utf-8" autocomplete="on">

            <div class="field-body ">
                <FormField type="email" required="required" :tabindex="1" placeholder="Email" name="login[email]" autocomplete="email" v-model="stageName" v-validate="'required'" autocapitalize="off" autofocus="autofocus"></FormField>
                <FormField type="password" required="required" :tabindex="2" placeholder="Password" name="login[password]" autocomplete="current-password" v-model="email" v-validate="'required|email'"></FormField>
                <button class="button is-success" tabindex="3" type="submit" id="signin">Sign in</button>
                <a class="btn btn-link" tabindex="4" href="/forgot">Forgot password?</a>
            </div>

        </form>
    </div>
</header>

Компонент FormField 

<template>
  <div class="field">
    <label v-if="label" class="label" :for="id">{{label}}</label>
    <input :type="type" class="input" :class="{'is-danger':this.$validator.errors.has(label)}" :tabindex="tabindex" :name="name" :id="id" :autocomplete="autocomplete" :value="value" @input="updateValue" @change="updateValue" @blur="$emit('blur')" :disabled="disabled" :required="required" :placeholder="placeholder" />
    <span v-show="this.$validator.errors.has(label)" class="subtitle is-6 has-text-danger">{{ this.$parent.errors.first(label) }}</span>
  </div>
</template>

<script>
export default {
    name: "FormField",
    //inject: ['$validator'],
    inject: {
        $validator: '$validator'
    },
    $_veeValidate: {
        name() {
            return this.label;
        },
        // fetch the current value from the innerValue defined in the component data.
        value() {
            return this.value;
        }
    },
    props: {
        value: String,
        placeholder:String,
        id: {
            type: String,
            default: () => {
                const rand = Math.floor((Math.random() * 10000) + 1); //TODO: Create enough margin so there won't be a chance it has the same ID as other elemnts. Change the method?
                const id = `undefined_${Date.now()*rand}`; //${this._uid}
                return id;
            }
        },
        label: {
            type: String,
            required: false
        },
        type: {
            type: String,
            default: "text"
        },
        name: {
            type: String,
            required: true
        },
        autocomplete: {
            type: String,
            required: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        required:{
            type:Boolean,
            default:false
        },
        tabindex:{
          type:Number
        },
        autocapitalize:{
          type:String,

        },
        autofocus:{
          type:Boolean
        }
    },
    computed: {

    },
    created: function() {
        console.log("Created");
    },
    mounted: function() {
        console.log("Mounted");
    },
    methods: {
        updateValue(e) {
            this.$emit("input", e.target.value);
        }
    }
};
</script>

1 Ответ

0 голосов
/ 30 апреля 2018

В документации описано, как это сделать:

https://bulma.io/documentation/components/navbar/

Сначала навигационная панель разделена на две части.

| Navbar бренд | Navbar меню |

navbar-brand всегда будет отображаться слева, navbar-menu заполняет оставшееся пространство справа.

Внутри navbar-menu вы можете указать, какие боковые элементы будут отображаться с еще двумя элементами.

| Navbar-начало | Navbar конец | 

<nav class="navbar">
    <div class="navbar-brand">
        This is on the left of the bar.
    </div>
    <div class="navbar-menu">
        This spans the rest of the space on the right of the bar.
        <div class="navbar-start">
            This is on the left.
            <div class="navbar-item">Your items on the left</div>
        </div>
        <div class="navbar-end">
            This is on the right.
            <div class="navbar-item">Your items on the right</div>
        </div>
    </div>
</nav>
...