Vuetify Toolkit Save
The set of additional vuetify components
Project README
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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
Open Source Agenda is not affiliated with "Vuetify Toolkit" Project. README Source: kolesnikovav/vuetify-toolkit
Stars
26
Open Issues
24
Last Commit
1 month ago
Repository
License
Open Source Agenda Badge
