gijutsu-toolkit-vue
v0.1.30
Published
Gijutsu VueJS toolkit components and libs
Downloads
14
Maintainers
Readme
gijutsu-toolkit-vue
Installation
npm install gijutsu-toolkit-vue --save
yarn add gijutsu-toolkit-vue
Configuration - main.js project file
import Toolkit from 'gijutsu-toolkit-vue';
import 'gijutsu-toolkit-vue/dist/gijutsu-toolkit-vue.css';
Vue.use(Toolkit);
Components
gj-breadcrumb: Breadcrumb
gj-button: Button
gj-grid: Grid
gj-layout: Layout
gj-form: Form
gj-form-input: Input
gj-form-textarea: Textarea
gj-form-select: Select
gj-form-radio: Radio
gj-form-select: Select
gj-form-cpfcnpj: CPFCNPJ
gj-form-maskedinput: Maskedinput
NotFound: Template
App.vue - sample
<template>
<div id="app">
<gj-layout
title="Toolkit"
:navigation="navigation"
:links="links"
:show-hamburguer-icon="true"
:show-left-menu="true">
<router-view />
</gj-layout>
</div>
</template>
<script>
export default {
data() {
return {
navigation: [
{
root: { icon: 'fas fa-home', title: 'Home', link: '/' },
},
{
root: { icon: 'fas fa-file-alt', title: 'First' },
leaves: [
{ title: 'First', link: '/first' },
],
},
],
};
},
computed: {
links() {
if (this.$route.meta.breadcrumb) return this.$route.meta.breadcrumb;
return [];
},
},
};
</script>
gj-layout props
- navigation [array: data] - an array with the Left Menu options
- links [array: computed] - an array defined on router file with the breadcrumb page options. each route needs a breadcrumb definition
- show-hamburguer-icon [boolean: props] - controls the exibition of the hamburguer icon to hide or show the left menu
- show-left-menu [boolean: props] - hide or show the left menu