Theme Toggle
通过圆形、矩形或百叶窗过渡揭示新的页面主题。
适用场景
- 当界面需要以下行为时使用 Theme Toggle：通过圆形、矩形或百叶窗过渡揭示新的页面主题。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/theme-toggle.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
Rectangle
Circle
Circle blur
Blinds
packages/vue/src/motion/theme-toggle/demo.vue
<script setup lang="ts">
import { ThemeToggle, type ThemeVariant } from "@/components/orvui/motion/theme-toggle";
const variants: [ThemeVariant, string][] = [["rectangle", "Rectangle"], ["circle", "Circle"], ["circle-blur", "Circle blur"], ["blinds", "Blinds"]];
</script>
<template>
<div class="flex h-full w-full items-center justify-center gap-5">
<div v-for="[variant, label] in variants" :key="variant" class="flex flex-col items-center gap-2">
<ThemeToggle :variant="variant" start="bottom-up" class="rounded-xl border border-border bg-background p-2.5" icon-class-name="h-5 w-5" />
<span class="text-[11px] text-muted-foreground">{{ label }}</span>
</div>
</div>
</template>
packages/vue/src/motion/theme-toggle/src/ThemeToggle.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
ThemeToggle | v-model"light" | "dark" | update:modelValue |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
modelValue?"light" | "dark"(theme.isDark.value ? "dark" : "light")variant?"rectangle" | "circle" | "circle-blur" | "blinds""rectangle"start?"center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom-up""bottom-up"iconClassName?string—事件
update:modelValue—@update:modelValuechange—@change无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Theme Toggle？
- 需要自定义触发器时使用 useThemeToggle composable，并保留相同的主题目标和过渡选项。
- 如何连接到应用状态？
- 监听 update:modelValue、change，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1