交互

Dual State Toggle

双状态切换按钮：基于 shadcn/ui Button，内置点击缩放 + 图标切换动画（opacity + blur），支持 5 种过渡效果预设与自定义过渡配置。

togglebuttoniconanimationswitchdual-statemotionshadcn

快速预览

查看 Dual State Toggle 组件的基本效果

基本用法

使用 Dual State Toggle 组件的基础示例

导入组件

1import { DualStateToggle } from "@/components/qiuye-ui/dual-state-toggle";
2import { useState } from "react";
3import { Menu, X } from "lucide-react";

使用组件

1const [isOpen, setIsOpen] = useState(false);
2
3return (
4  <DualStateToggle
5    active={isOpen}
6    onToggle={setIsOpen}
7    activeIcon={<X />}
8    inactiveIcon={<Menu />}
9    activeLabel="关闭"
10    inactiveLabel="打开"
11    effect="rotate"
12  />
13);

组件演示

查看组件的各种使用方式和效果

基础用法

默认 fade 效果，点击在两种状态间切换

当前状态：未激活

过渡效果预设

5 种内置过渡效果：fade、rotate、slide-up、slide-down、scale

faderotateslide-upslide-downscale

fade

rotate

slide-up

slide-down

scale

按钮变体

支持 shadcn/ui Button 的所有 variant

defaultsecondaryoutlineghost

default

secondary

outline

ghost

按钮形状

方形（square）与圆形（circle）两种形状

square

circle

自定义过渡效果

传入自定义 initial / animate / exit 对象，与基础 opacity + blur 合并

rotate(-180°→0°→180°) + scale(0.6→1→0.6) + blur(4px)

常见场景

播放/暂停、显示/隐藏、通知开关等典型图标切换场景

播放

可见

通知开