组件展示

Exhibition 对话框

UI

对话框组件,在PC端与Mobile端都支持,基于shadcn/ui的Dialog和Drawer组件封装

使用示例
<Exhibition>
  <ExhibitionTrigger asChild>
    <button className="btn">打开弹窗</button>
  </ExhibitionTrigger>
  <ExhibitionContent>
    <ExhibitionHeader>
      <ExhibitionTitle>标题</ExhibitionTitle>
      <ExhibitionDescription>描述</ExhibitionDescription>
    </ExhibitionHeader>
    <ExhibitionBody>内容</ExhibitionBody>
    <ExhibitionFooter>
      <ExhibitionClose asChild>
        <button className="btn">关闭</button>
      </ExhibitionClose>
    </ExhibitionFooter>
  </ExhibitionContent>
</Exhibition>

Extension Button

UI

增强版按钮组件,基于shadcn/ui的Button组件封装,支持图标、加载状态、特效动画、复制功能等

使用示例
// 基础用法
<Button>按钮</Button>

// 带图标
<Button icon={ArrowRight} iconPlacement="right">
  带图标按钮
</Button>

// 加载状态
<Button loading loadingIconPlacement="left">
  加载中
</Button>

// 不同变体
<Button variant="destructive">危险按钮</Button>
<Button variant="outline">轮廓按钮</Button>
<Button variant="ghost">幽灵按钮</Button>

// 特效动画
<Button effect="shineHover">闪烁效果</Button>
<Button effect="gooeyRight">粘性效果</Button>
<Button effect="gradientSlideShow">渐变按钮</Button>

// 复制功能
<Button copyText="Hello World" icon={CopyIcon} iconPlacement="left">
  复制文本
</Button>

// 自定义复制成功提示
<Button 
  copyText="Hello World" 
  icon={CopyIcon} 
  iconPlacement="left"
  successText="已复制!"
  timeout={5000}
>
  复制文本
</Button>

// 带复制回调
<Button 
  copyText="Hello World" 
  icon={CopyIcon} 
  iconPlacement="left"
  onCopy={(text) => console.log('Copied:', text)}
>
  复制文本
</Button>