ButtonGrid

A grid of <Button> components.

Integrates the Button Grid control from Tweakpane-creator Hiroki Kokubun's Essentials plugin.

See <RadioGrid> for a radio-flavored variation.

Svelte Tweakpane UI also includes some additional logic to manage default grid dimensions:

• If no rows or columns props are provided, it will create a grid with the squarest possible aspect ratio for the given quantity of values.

• If a single rows or columns prop is provided, it lets the undefined axis grow / shrink as needed to accommodate the quantity of values.

• If both rows and columns props area provided, then buttons may be clipped if rows * columns < values.length.

Usage outside of a <Pane> component will implicitly wrap the button grid in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations. The fork also changes the package name from @tweakpane/plugin-essentials to @kitschpatrol/tweakpane-plugin-essentials for consistency with other plugins.

---

Example

Demo

Code

ButtonGridExample.svelte

<script lang="ts">
  import {
    Button,
    ButtonGrid,
    type ButtonGridClickEvent,
    Pane,
  } from 'svelte-tweakpane-ui'

  const keyboard = [
    ...Array.from(
      {
        length: 26,
      },
      (_, index) => String.fromCodePoint(65 + index),
    ),
    ',',
    '.',
    '!',
    '⌫',
  ]

  let textBuffer = ''

  function handleClick(event: ButtonGridClickEvent) {
    textBuffer =
      event.detail.label === '⌫'
        ? textBuffer.slice(0, -1)
        : textBuffer + event.detail.label
  }
</script>

<Pane position="inline" title="Austerity Keyboard">
  <ButtonGrid on:click={handleClick} buttons={keyboard} />
  <Button on:click={() => (textBuffer += '\u2002')} title=" " />
</Pane>

<div class="demo">
  <p>
    {textBuffer}
  </p>
</div>

<style>
  .demo {
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(45deg, orange, magenta);
  }

  .demo > p {
    margin: 0;
    padding: 0.5rem;
    font-family: monospace;
    font-size: 2rem;
    line-height: 1.2;
    color: white;
    word-break: break-all;
    white-space: pre-wrap;
  }

  .demo > p::after {
    content: '_';
    opacity: 0.5;
  }
</style>

---

Props

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

buttons required
Description	Array of names, each of which will become the title of a button in the grid.
Type	string[]

columns optional
Description	Number of columns to arrange the buttons into. Setting columns without setting rows will lock the column count and allow the row count to change dynamically based on the number of buttons.
Type	number
Default	undefined

label optional
Description	Text displayed next to the button grid.
Type	string
Default	undefined

rows optional
Description	Number of rows to arrange the buttons into. Setting rows without setting columns will lock the column count and allow the column count to change dynamically based on the number of buttons.
Type	number
Default	undefined

---

Events

click
Description	Fires when a button is clicked. Note that the values described in the ButtonGridClickEvent type are available on the event.detail parameter.
Type	ButtonGridClickEvent