Switch 开关

状态切换

正常：

禁用：

Switch 下拉菜单

这是 Switch 基础例子

<script setup lang="ts">
import { ref } from 'vue'

const test = ref(false)
const test2 = ref(false)
</script>

<template>
  <div class="switch-demo">
    <div>
      正常：<NpSwitch v-model="test" />
    </div>
    <div>
      禁用：<NpSwitch v-model="test2" disabled />
    </div>
  </div>
</template>

<style scoped>
.switch-demo {
  margin: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Switch 下拉菜单

这是 Switch 不同尺寸的例子

<script setup lang="ts">
import { ref } from 'vue'

const test = ref(false)
</script>

<template>
  <div class="switch-demo">
    <NpSwitch v-model="test" size="large" />

    <NpSwitch v-model="test" />

    <NpSwitch v-model="test" size="small" />
  </div>
</template>

<style scoped>
.switch-demo {
  margin: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Value: false

OFF

Switch 下拉菜单

这是 Switch 文字描述的例子

<script setup lang="ts">
import { ref } from 'vue'

const test = ref(false)
</script>

<template>
  <div class="switch-demo">
    <h2>Value: {{ test }}</h2>
  </div>
  <div class="switch-demo">
    <NpSwitch v-model="test" green active-value="Enable" inactive-value="Disable" />
    <NpSwitch v-model="test" green active-text="ON" inactive-text="OFF" />
  </div>
</template>

<style scoped>
.switch-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}
</style>