vuetify-toolkit
The set of additional vuetify components, for using with vuetify.js library
Live demo
See Live demo & documentation.
Components
- VDataGridSelect The selector with Tabular items presentation Examples & Sandbox
- VDateTimeSelect Easy to use datetime selector Examples & Sandbox
- VCascader Cascade selection box Examples & Sandbox
- VTreeSelect Selector for nested & tree like items Examples & Sandbox
- VMdView Displaying any hierarchical data (like file explorer) Examples & Sandbox
- VAdvDataTable Data table with columns visibitity and order settings by user Examples & Sandbox
- VTooltipBtn Button with icon, text and hint Examples & Sandbox
Installation
yarn add vuetify-toolkit
or
npm i vuetify-toolkit --save
Basic usage
Change your src/plugins/vuetify.js file as follows
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
VTreeSelect,
VCascader,
VDataGridSelect,
VDateTimeSelect,
VAdvDataTable,
VMdView } from 'vuetify-toolkit/vuetify-toolkit.umd'
Vue.use(Vuetify,{
VTreeSelect,
VCascader,
VDataGridSelect,
VDateTimeSelect,
VAdvDataTable,
VMdView
});
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
});
Then, you can use this components as
<template>
<div>
<v-tree-select>
<!-- -->
</v-tree-select>
<v-cascader>
<!-- -->
</v-cascader>
<v-data-grid-select>
<!-- -->
</v-data-grid-select>
<v-date-time-select>
<!-- -->
</v-date-time-select>
<v-adv-data-table>
<!-- -->
</v-adv-data-table>
<v-md-view>
<!-- -->
</v-md-view>
</div>
</template>
CDN usage
You can use this library directly via cdn. Bellow is the example how you can do it
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify-toolkit@0.3.x/vuetify-toolkit.css rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-tree-select/>
<v-container>Hello world</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify-toolkit@0.3.x/vuetify-toolkit.umd.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>
Hello world example
Here is the sample project with vuetify-toolkit, built with vue cli
Codesandbox example
Contributing
Any help for this project are welcome. Please read the Contributing Guide