1.0.0 • Published 3 years ago
test-ui-lib-rapha-3 v1.0.0
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>
1.0.0
3 years ago