README

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

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

export default {
  components: { DatGui, DatString }
}

<DatGui>
  <DatString v-model="someString" />
</DatGui>

Components

DatGui

The main UI.

<DatGui
  v-model:open="isOpen"
  open-text="Open Controls"
  close-text="Close Controls"
  close-position="bottom"
>
  ... other components ...
</DatGui>

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.

DatBoolean

A checkbox to indicate true or false

<DatBoolean
  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.

DatButton

A button

<DatButton
  @click="onClick"
  label="Click me" />

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

DatColor

A color selector

<DatColor
  v-model="someColor"
  label="My Color" />

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

DatFolder

A collapsible folder containing other controls

<DatFolder
  v-model:open
  label="My Folder"
>
  ... other components ...
</DatFolder>

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

DatNumber

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

<DatNumber
  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

DatSelect

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

<DatSelect
  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

DatString

A text input.

<DatString
  v-model="someString"
  :label="My String"
/>

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

Usage no npm install needed!