Toggle

A toggle is a two-state button component that can be turned on or off.

<div class="flex flex-col justify-center items-center">
  <Input.toggle
    on_toggle_on={
      JS.show(
        to: "#toggle-text",
        transition: {"ease-in-out duration-300", "opacity-0", "opacity-100"}
      )
    }
    on_toggle_off={
      JS.hide(
        to: "#toggle-text",
        transition: {"ease-in-out duration-300", "opacity-100", "opacity-0"}
      )
    }
    class={[
      "w-8 h-8 flex justify-center items-center text-slate-600 rounded-sm",
      "bg-white hover:bg-gray-100 ui-on:bg-gray-100 shadow-sm"
    ]}
  >
    <span class="sr-only">toggle text button</span>
    <Heroicons.paper_airplane mini class="w-4 h-4" />
  </Input.toggle>
  <div class="mt-4 h-8">
    <span id="toggle-text" class="hidden text-slate-700">Hi, there!</span>
  </div>
</div>

Setup

To use the toggle component, you’ll have to import Toggle module in your assets/app.js.

import { createSproutConfig, Toggle } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Toggle()],
});

Anatomy

<button is="sp-toggle" data-state="on | off"></button>

Under the hood the slot content is rendered inside a sp-toggle customized builtin element.

Attributes

Attribute	Type	Description
`on`	`:boolean`	Turn on the toggle by default, default to `false`
`on_toggle_on`	`JS`	JS commands executed when the toggle is turned on
`on_toggle_off`	`JS`	JS commands executed when the toggle is turned off
`rest`	`:global`	Global attributes to be passed to the `sp-toggle` element