文档目录

开关

槽位凹槽轨道 + 20×20 浮雕把手的开关。

难度锁定：关

import { useState } from "react";

import { Switch } from "./index";

/**
 * Switch 预览用例
*/
export function SwitchDemo() {
  const [on, setOn] = useState(false);

  return (
    <div className="flex flex-col gap-8">
      <label className="flex items-center gap-4">
        <Switch
          checked={on}
          onCheckedChange={(next) => {
            setOn(next);
          }}
        />
        <span className="font-mc mc-text">
          难度锁定：
          {on ? "开" : "关"}
        </span>
      </label>
      <Switch aria-label="默认开" defaultChecked />
      <Switch aria-label="禁用" disabled />
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/switch

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Switch } from "@tennantite/ui";

CLI 拷贝导入

import { Switch } from "@/components/tennantite/switch";

import { useState } from "react";

import { Switch } from "./index";

/**
 * Switch 预览用例
*/
export function SwitchDemo() {
  const [on, setOn] = useState(false);

  return (
    <div className="flex flex-col gap-8">
      <label className="flex items-center gap-4">
        <Switch
          checked={on}
          onCheckedChange={(next) => {
            setOn(next);
          }}
        />
        <span className="font-mc mc-text">
          难度锁定：
          {on ? "开" : "关"}
        </span>
      </label>
      <Switch aria-label="默认开" defaultChecked />
      <Switch aria-label="禁用" disabled />
    </div>
  );
}

API Reference

无公开 props。

源码

packages/ui/src/primitives/switch/index.tsx

npm 包保留源码目录，可直接复制改造。