MinhKy Design

一个通用的 React 组件库，参考 Ant Design 设计风格。

特性

• 🎨 参考 Ant Design 设计规范
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 📦 开箱即用的高质量 React 组件
• 🎯 支持 ES Module 和 UMD 两种格式
• 🌈 现代化的构建工具链（Vite + TypeScript）

设计规范

颜色体系

| 类型 | 颜色值 | 说明 | | --- | --- | --- | | 基础色 | #2F92FF | 主要按钮、链接等交互元素 | | 危险/失败 | #ED483D | 危险操作、错误提示 | | 警告 | #FFA940 | 警告提示 | | 成功 | #52C41A | 成功提示、完成状态 |

安装

npm install minhkydesign

或者使用 yarn：

yarn add minhkydesign

使用

引入组件

import { Button } from 'minhkydesign';
import 'minhkydesign/dist/minhkydesign.css';

function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
    </div>
  );
}

组件

Button 按钮

按钮用于开始一个即时操作。

基本使用

import { Button } from 'minhkydesign';

<Button type="primary">Primary</Button>
<Button type="default">Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<Button type="link">Link</Button>

API

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | type | 按钮类型 | primary | default | dashed | text | link | default | | size | 按钮尺寸 | large | middle | small | middle | | shape | 按钮形状 | default | circle | round | default | | disabled | 按钮失效状态 | boolean | false | | loading | 设置按钮载入状态 | boolean | false | | danger | 设置危险按钮 | boolean | false | | block | 将按钮宽度调整为其父宽度 | boolean | false | | icon | 设置按钮的图标组件 | ReactNode | - | | htmlType | 设置 button 原生的 type 值 | submit | button | reset | button | | onClick | 点击按钮时的回调 | (event) => void | - |

开发

启动开发服务器

npm run dev

构建

npm run build

这将生成：

• dist/minhkydesign.es.js - ES Module 格式
• dist/minhkydesign.umd.js - UMD 格式
• dist/minhkydesign.css - 样式文件
• dist/index.d.ts - TypeScript 类型定义

发布

npm publish

技术栈

• React 19
• TypeScript 5
• Vite 7
• ESLint

许可证

MIT