Toggle 是一种可切换按下/弹起状态的按钮，常用于工具栏中的加粗、斜体等开关式操作。
- 需要切换某个布尔状态（如文本加粗、斜体）时。
- 与
v-model:pressed 绑定，管理按下状态。
<script setup lang="ts">
import { ref } from "vue";
import { Toggle } from "@reglow/reui";
import { Bold } from "lucide-vue-next";
const pressed = ref(false);
</script>
<template>
<Toggle v-model:pressed="pressed" aria-label="Toggle bold">
<Bold class="size-4" />
</Toggle>
</template>
通过 variant 控制样式：default（实心）或 outline（描边）。
<template>
<Toggle variant="default">默认</Toggle>
<Toggle variant="outline">描边</Toggle>
</template>
通过 size 控制大小：sm、default、lg。
<template>
<Toggle size="sm">小</Toggle>
<Toggle size="default">默认</Toggle>
<Toggle size="lg">大</Toggle>
</template>
<template>
<Toggle disabled>禁用</Toggle>
</template>
import { Toggle } from "@reglow/reui";
| 属性 | 类型 | 默认值 | 说明 |
|---|
pressed | boolean | false | 按下状态（v-model:pressed） |
variant | "default" | "outline" | "default" | 变体 |
size | "default" | "sm" | "lg" | "default" | 尺寸 |
disabled | boolean | false | 禁用 |
class | string | - | 附加类名 |
