<template>
  <div class="demo-switch-basic">
    <ui-switch v-model="value"></ui-switch>

    &nbsp;&nbsp;&nbsp;

    <ui-switch v-model="value">
      <span slot="checked">
        开
      </span>
      <span slot="unchecked">
        关
      </span>
    </ui-switch>

    &nbsp;&nbsp;&nbsp;

    <ui-switch
      v-model="value"
      :icon="value ? 'pinned' : 'pin'"
      :icon-props="{
        fill: value ? '#0070d2' : '#abadb0',
      }">
      <ui-icon
        slot="checked"
        name="check"
        size="12px"></ui-icon>
      <ui-icon
        slot="unchecked"
        name="close"
        size="12px"></ui-icon>
    </ui-switch>

    &nbsp;&nbsp;&nbsp;

    <ui-switch
      v-model="value"
      mini></ui-switch>
  </div>
</template>

<script>
import { Switch, Icon } from "amumu-ui"
export default {
  components: {
    "ui-switch": Switch,
    "ui-icon": Icon,
  },
  data() {
    return {
      value: false,
    }
  },
}
</script>
