IDO Common Components

一个基于 React 和 TailwindCSS 的现代化组件库，为 IDO 系列应用提供统一的 UI 组件。

版本

当前版本: v0.1.80

特性

• 🎨 现代化的设计风格
• 📦 开箱即用的高质量组件
• 🛡 使用 TypeScript 开发，提供完整的类型定义
• 🎯 按需引入，支持 Tree Shaking
• 🌐 支持服务端渲染 (SSR)

安装

npm install ido-common
# 或者
yarn add ido-common

使用

import { IdoDialog, IdoInput, IdoRadio } from 'ido-common'

function App() {
  return (
    <div>
      <IdoInput
        label="Email"
        placeholder="Enter your email"
      />
    </div>
  )
}

组件列表

基础组件

• IdoDialog - 对话框组件

  • 支持自定义位置和大小
  • 支持动画效果
  • 支持遮罩层点击关闭

• IdoDrawer - 抽屉组件

  • 支持四个方向展示
  • 支持自定义大小
  • 平滑的动画效果

• IdoInput - 输入框组件

  • 支持图标前缀
  • 支持错误状态
  • 支持禁用状态
  • 完整的事件回调

• IdoRadio - 单选框组件

  • 支持单独使用和组合使用
  • 支持禁用状态
  • 支持自定义样式

• IdoCheckbox - 复选框组件

  • 支持自定义样式
  • 支持禁用状态
  • 支持带计数的标签

• IdoToast - 提示框组件

  • 支持多个位置
  • 支持自定义显示时间
  • 平滑的动画效果

图标组件

提供了一系列常用图标：

• IconClose - 关闭图标
• IconMenu - 菜单图标
• IconTick - 勾选图标
• IconSuccess - 成功图标
• IconEmail - 邮件图标
• IconPassword - 密码图标
• IconSignOut - 退出图标
• IconManageEvent - 管理活动图标
• 更多图标持续添加中...

API 文档

IdoDialog

interface IdoDialogProps {
  open: boolean                    // 控制对话框显示/隐藏
  onClose?: () => void            // 关闭回调
  children?: React.ReactNode      // 对话框内容
  maskClosable?: boolean         // 是否允许点击遮罩层关闭
  // ... 其他属性
}

IdoInput

interface IdoInputProps {
  value?: string                 // 输入值
  onChange?: (value: string) => void  // 值变化回调
  label?: React.ReactNode       // 标签内容
  error?: string               // 错误信息
  icon?: React.ReactNode       // 前缀图标
  // ... 其他属性
}

IdoRadio

interface IdoRadioProps {
  checked?: boolean            // 是否选中
  onChange?: (checked: boolean) => void  // 状态变化回调
  label?: React.ReactNode     // 标签内容
  disabled?: boolean         // 是否禁用
  // ... 其他属性
}

更多组件的详细 API 文档正在完善中...

开发指南

1. 克隆仓库

git clone [repository-url]

2. 安装依赖

npm install
# 或者
yarn

3. 启动开发服务器

npm run dev
# 或者
yarn dev

贡献指南

欢迎提交 Issue 和 Pull Request。

许可证

MIT License