inno-toggle

Preview

light background

dark background

Angular

<div class="component-display">
  <div class="light-bg">
    <span class="bg-title">light background</span>
    <inno-toggle variant="light"></inno-toggle>
    <inno-toggle variant="light" disabled></inno-toggle>
  </div>
  <div class="dark-bg">
    <span class="bg-title">dark background</span>
    <inno-toggle variant="dark"></inno-toggle>
    <inno-toggle variant="dark" disabled></inno-toggle>
  </div>
</div>

React

<div class="component-display">
  <div class="light-bg">
    <span class="bg-title">light background</span>
    <InnoToggle variant="light"></InnoToggle>
    <InnoToggle variant="light" disabled></InnoToggle>
  </div>
  <div class="dark-bg">
    <span class="bg-title">dark background</span>
    <InnoToggle variant="dark"></InnoToggle>
    <InnoToggle variant="dark" disabled></InnoToggle>
  </div>
</div>

Vue

<div class="component-display">
  <div class="light-bg">
    <span class="bg-title">light background</span>
    <InnoToggle variant="light"></InnoToggle>
    <InnoToggle variant="light" disabled></InnoToggle>
  </div>
  <div class="dark-bg">
    <span class="bg-title">dark background</span>
    <InnoToggle variant="dark"></InnoToggle>
    <InnoToggle variant="dark" disabled></InnoToggle>
  </div>
</div>

Properties

Property	Attribute	Description	Type	Default
checked	checked	Whether the slide-toggle element is checked or not. Can be changed programatically, will emit a change event.	boolean	false
disabled	disabled	Whether the slide-toggle element is disabled or not.	boolean	false
tabIdx	tab-idx	The tab index of the toggle	number	0
variant	variant	Color variant of the toggle component.	"dark" | "light"	'dark'

Events

Event	Description	Type
checkedChange	An event will be dispatched each time the slide-toggle changes its value.	CustomEvent<boolean>

---

Built with StencilJS