test-ui-lib-rapha-4 v1.0.4

Cotabox UI

Kit de ferramentas UI para a web em Vue.js 2.0

Instalação

npm install @cotabox/cotabox-ui -S

import '~/@cotabox/cotabox-ui/dist/cotabox-ui.min.css';

Importação do tema no Nuxt.js nuxt.config.js

module.exports = {
  // ...

  css: [
    { src: '@cotabox/cotabox-ui/dist/cotabox-ui.min.css', lang: 'css' },
  ],
}

Utilização rápida

<template>
  <cb-form
    ref="form"
    :model="form"
    @submit.native.prevent="validate"
  >
    <cb-form-item
      label="E-mail"
      for="email"
      size="md"
      prop="email"
      :rules="[
        {
          required: true,
          trigger: 'blur',
        },
        {
          type: 'email',
          trigger: 'blur',
        },
      ]"
    >
      <cb-input
        id="email"
        v-model="form.email"
        type="email"
        block
        placeholder="exemplo@mail.com"
      />
    </cb-form-item>

    <cb-form-item
      label="Senha"
      for="password"
      size="md"
      prop="password"
      :rules="{ required: true, trigger: 'blur' }"
    >
      <cb-input
        id="password"
        v-model="form.password"
        type="password"
        block
        placeholder="Digite sua senha"
      />
    </cb-form-item>

    <cb-form-item
      label="Confirmar senha"
      for="password-confirmation"
      size="md"
      prop="password_confirmation"
      :rules="{ required: true, trigger: 'blur' }"
    >
      <cb-input
        id="password-confirmation"
        v-model="form.password_confirmation"
        type="password"
        block
        placeholder="Confirme sua senha"
      />
    </cb-form-item>

    <cb-button
      type="submit"
      size="lg"
      variant="success"
      block
    >
      Confirmar
    </cb-button>
  </cb-form>
</template>

<script>
  import {
  CbForm,
  CbFormItem,
  CbInput,
  CbButton,
  // ...
} from '@cotabox/cotabox-ui';

export default {
  components: {
    CbForm,
    CbFormItem,
    CbInput,
    CbButton,
  },

  data() {
    return {
      form: {
        email: '',
        password: '',
        password_confirmation: '',
      },
    };
  },

  methods: {
    validate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('Sucesso!');
        }
      });
    },
  },

  // ...
};
</script>