切换 Toggle

基于 @radix-ui/react-toggle 封装的按钮式开关组件。可用于状态切换（如激活/取消激活），支持尺寸、风格变体控制，并内置良好的可访问性和交互样式。

---

📦 引入方式

import { Toggle } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 尺寸（size）

示例

源码

<Space>
  <Toggle size="sm">小</Toggle>
  <Toggle size="default">默认</Toggle>
  <Toggle size="lg">大</Toggle>
</Space>

📚 风格（variant）

示例

源码

<Space>
  <Toggle variant="default">透明背景（hover 时变浅）</Toggle>
  <Toggle variant="outline">边框风格</Toggle>
</Space>

📚 搭配图标使用

示例

源码

import { Bold } from "lucide-react";

<Toggle aria-label="加粗">
  <Bold />
</Toggle>;

📚 状态切换组件

示例

源码

  import * as React from "react";
  import { Toggle } from "@npmqg/react-ui-core"; // shadcn 的 Toggle 组件路径
  export default function ToggleDemo() {
      const [active, setActive] = React.useState(false);

      return (
        <div className="p-4">
          <Toggle
            variant="outline"
            size="default"
            pressed={active}
            onPressedChange={setActive}
          >
            {active ? "已启用" : "启用"}
          </Toggle>
        </div>
      );
  }

---

🧩 Props

Prop 名称	类型	说明	默认值
size	'default' | 'sm' | 'lg'	控制按钮大小	default
variant	'default' | 'outline'	控制样式风格	default
pressed	boolean	当前是否激活（受控模式）	—
onPressedChange	(pressed: boolean) => void	状态变化回调	—
disabled	boolean	是否禁用	false
children	ReactNode	显示的文字或图标	—

---

📌 注意事项

• 建议配合图标（如 Lucide）使用可读性更高
• pressed 与 onPressedChange 控制组件状态（受控组件）