# svelma-pro
开关

# Switch

## 开关

Codesandbox
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

Codesandbox
Primary
Danger
Warning
Info
Link
Dark

    <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

Codesandbox
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`