dat-gui-vue

!dat-gui-vue

> A Vue 3 port of @cyrilf/vue-dat-gui, which is a Vue.js port of the popular dat.GUI library.

Install

``
npm install --save dat-gui-vue
`

Usage

`js
import { DatGui, DatString } from 'dat-gui-vue'

export default {
components: { DatGui, DatString }
}
`

`html



`

Components

$3

The main UI.

`html
v-model:open="isOpen"
open-text="Open Controls"
close-text="Close Controls"
close-position="bottom"
>
... other components ...

`

- v-model:open (Optional) Bind to the open state of the GUI.
- open-text (Optional) Text to display when GUI is closed.
- close-text (Optional) Text to display when GUI is open.
- close-position (Optional) Snap to top or bottom of screen.

$3

A checkbox to indicate true or false

`html
v-model="someBoolean"
label="My Boolean" />
`

- v-model (Required) Bind to a boolean value in your model.
- label (Optional) Text to display as the label.

$3

A button

`html
@click="onClick"
label="Click me" />
`

- @click (Optional) Click handler
- label (Optional) Button text

$3

A color selector

`html
v-model="someColor"
label="My Color" />
`

- v-model (Required) Bind to a color string
- label (Optional) Text to display as the label.

$3

A collapsible folder containing other controls

`html
v-model:open
label="My Folder"
>
... other components ...

`

- v-model:open (Optional) Bind to the open state of the folder.
- label (Optional) Folder label

$3

A number slider / input. If min and max are specified, then
a slider will be visible.

`html
v-model="someNumber"
:min="0"
:max="100"
:step="5"
label="My Number"
:show-slider="false"
/>
`

- v-model (Required) Bind to a number
- min (Optional) Minimum value
- max (Optional) Maximum value
- step (Optional) Incremental value
- label (Optional) Text to display as the label
- show-slider (optional) Option to hide the slider

$3

A dropdown list. Options can be [{name, value}, ...] or [value, ...].

`html
v-model="someValue"
:items="someArray"
label="My Dropdown"
/>
`

- v-model (Required) Bind to a value
- items (Required) Array of {name, value} or array of values.
- label (Optional) Text to display as the label

$3

A text input.

`html
v-model="someString"
:label="My String"
/>
`

- v-model (Required) Bind to a string
- label` (Optional) Text to display as the label