svelma-pro

Foo
value = false

Disabled

<script>
  import { Switch } from 'svelma-pro'
  
  let val
</script>

<div class="field">
  <Switch bind:checked={val}>Foo</Switch>
  <br>
  <code>value = {JSON.stringify(val)}</code>
</div>
<div class="field">
  <Switch disabled>Disabled</Switch>
</div>

Types

<script>
  import { Switch } from 'svelma-pro'
</script>

<div class="field">
  <Switch checked="true" type="is-primary">Primary</Switch>
</div>
<div class="field">
  <Switch checked="true" type="is-danger">Danger</Switch>
</div>
<div class="field">
  <Switch checked="true" type="is-warning">Warning</Switch>
</div>
<div class="field">
  <Switch checked="true" type="is-info">Info</Switch>
</div>
<div class="field">
  <Switch checked="true" type="is-link">Link</Switch>
</div>
<div class="field">
  <Switch checked="true" type="is-dark">Dark</Switch>
</div>

Sizes

Small

Default

Medium

Large

<script>
  import { Switch } from 'svelma-pro'
</script>

<div class="field">
  <Switch size="is-small">Small</Switch>
</div>
<div class="field">
  <Switch>Default</Switch>
</div>
<div class="field">
  <Switch size="is-medium">Medium</Switch>
</div>
<div class="field">
  <Switch size="is-large">Large</Switch>
</div>
</div>

API

Name	Description	Type	Values	Default
`checked`	Binding for whether the switch to "on" or not, optional	Any	—	`false`
`type`	Type (color of control), optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`	—
`size`	Size of switch, optional	String	`is-small`, `is-medium`, `is-large`	—
`disabled`	Whether switch is disabled or not, optional	Boolean	—	`false`