A Vue.js port of the popular dat.GUI library.
This is a lightweight graphical user interface to change variables in Javascript. Useful for all your demo or experiment code.
Warning
This version for Vue2 is now DEPRECATED. Please refer to the main branch for the Vue3 library.
Check out the demo page.
- cyrilf/microbios: Cellular automata simulation / Github
- ...
- Feel free to submit a PR to add your website.
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);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>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!");
},
},
});Here are the different options:
npm install
npm run build
npm run lint
./deploy
See Configuration Reference.
This project was generated using vue-cli.
Feel free to open any Pull Request/Issues.
- dat.GUI for the initial project