vue-dat-gui
A Vue.js port of the popular dat.GUI library.
This is a lightwieght graphical user interface to change variables in Javascript. Useful for all your demo or experiment code.
DEMO ✨
Check out the demo page.
Used by:
- cyrilf/microbios: Cellular automata simulation / Github
- ...
- Feel free to submit a PR to add your website.
INSTALL 💻
Option 1 - Install from NPM
npm install --save @cyrilf/vue-dat-gui
Then the usage is:
import Vue from 'vue'
import DatGui from '@cyrilf/vue-dat-gui'
Vue.use(DatGui)Option 2 - Instal via umd file
In your head tag, include the following code:
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@cyrilf/vue-dat-gui@latest/dist/vue-dat-gui.umd.min.js"></script>USAGE 🖱
You can always refer to the public/index.html file for the most up-to-date example of how to use it. The demo page is also available.
In your view:
<div class="app">
<dat-gui closeText="Close controls" openText="Open controls" closePosition="bottom">
<dat-color v-model="background" label="Background"/>
<dat-number v-model="titleFontSize" label="Title font-size"/>
<dat-string v-model="title" label="Title"/>
<dat-button @click="triggerAlert" label="Trigger alert"/>
<dat-folder label="Picture">
<dat-select v-model="pictureUrl" :items="pictures" label="Picture"/>
<dat-boolean v-model="showPicture" label="Show Picture"/>
<dat-folder label="Box shadow">
<dat-number v-model="boxShadow.offsetX" :min="-100" :max="100" :step="1" label="Offset X"/>
<dat-number v-model="boxShadow.offsetY" :min="-100" :max="100" :step="1" label="Offset Y"/>
<dat-number v-model="boxShadow.blurRadius" :min="0" :max="100" :step="1" label="Blur radius"/>
<dat-number v-model="boxShadow.spreadRadius" label="Spread radius"/>
<dat-color v-model="boxShadow.color" label="Color"/>
</dat-folder>
</dat-folder>
</dat-gui>
</div>In your javascript:
import Vue from 'vue'
import DatGui from '@cyrilf/vue-dat-gui'
Vue.use(DatGui)
new Vue({
el: '#app',
data() {
return {
background: '#cdeecc',
titleFontSize: 75,
title: 'vue-dat-gui',
showPicture: true,
pictures: [{ name: 'forest', value: '...' }, { name: 'mountain', value: '...' }],
pictureUrl: pictures[0].value,
boxShadow: {
offsetX: 27,
offsetY: 27,
blurRadius: 75,
spreadRadius: 2,
color: 'rgba(3, 23, 6, 1)',
},
}
},
methods: {
triggerAlert() {
alert('Yeah, you pressed it!')
},
}
})CONTRIBUTE 🖋
Here are the different options:
npm install
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.
This project was generated using vue-cli.
Feel free to open any Pull Request/Issues.
THANKS 👌
- dat.GUI for initial project
- joeslyon/vue-dat-gui for inspiration
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent