Airplane Mode

安装

pnpm dlx shadcn-vue@latest add switch

用法

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
  <Switch />
</template>

在开关滑块内添加图标

<template>
  <Switch :model-value="isDark" @update:model-value="toggleTheme">
    <template #thumb>
      <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
      <Icon v-else icon="lucide:sun" class="size-3" />
    </template>
  </Switch>
</template>

示例

表单

Email Notifications

Marketing emails

Receive emails about new products, features, and more.

Security emails

Receive emails about your account security.