ido-common v0.1.60

IDO Common Components

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

版本

当前版本: v0.1.9

特性

• 🚀 基于 React 和 TypeScript 构建
• 💅 使用 TailwindCSS 实现灵活的样式定制
• 📱 响应式设计，支持移动端和桌面端
• 📦 支持按需引入，优化包体积
• 🔍 完整的 TypeScript 类型定义

安装

使用 npm 安装:

npm install ido-common

或者使用 yarn:

yarn add ido-common

快速开始

首先确保你的项目中已经安装并配置了 React 和 TailwindCSS。

基本用法

import React from 'react';
import { IdoHeader } from 'ido-common';

function App() {
  return (
    <div className="App">
      <IdoHeader />
      {/* 其他内容 */}
    </div>
  );
}

export default App;

组件

IdoHeader

响应式头部导航组件，支持 PC 和移动端布局。

属性

示例

import React from 'react';
import { IdoHeader } from 'ido-common';

function App() {
  const handleLogin = () => {
    console.log('Login clicked');
  };

  const handleRegister = () => {
    console.log('Register clicked');
  };

  return (
    <div className="App">
      <IdoHeader 
        showLogin={true}
        onLogin={handleLogin}
        onRegister={handleRegister}
        className="custom-header"
      />
      {/* 页面内容 */}
    </div>
  );
}

export default App;

IdoFooter

响应式页脚组件，支持 PC 和移动端布局。

属性

示例

import React from 'react';
import { IdoFooter } from 'ido-common';

function App() {
  return (
    <div className="App">
      {/* 页面内容 */}
      <IdoFooter className="custom-footer" />
    </div>
  );
}

export default App;

图标组件

提供了一系列可定制的 SVG 图标组件，支持调整大小和颜色。

可用图标

• IconClose - 关闭图标
• IconFacebook - Facebook 社交图标
• IconInstagram - Instagram 社交图标
• IconLogo - IDO Logo 图标
• IconMenu - 菜单图标
• IconNavNext - 导航下一页图标
• IconPinterest - Pinterest 社交图标
• IconTikTok - TikTok 社交图标
• IconTwitter - Twitter 社交图标
• IconYouTube - YouTube 社交图标

属性

示例

import React from 'react';
import { IconLogo, IconMenu, IconClose, IconNavNext } from 'ido-common';

function IconExample() {
  return (
    <div className="icon-examples">
      {/* 基本用法 */}
      <IconLogo />
      
      {/* 自定义尺寸和颜色 */}
      <IconMenu size={32} color="#FF5500" />
      
      {/* 添加标题和自定义类名 */}
      <IconClose size={20} title="关闭" className="close-button" />
      
      {/* 响应式尺寸结合 TailwindCSS */}
      <IconNavNext className="w-6 h-6 md:w-8 md:h-8" color="currentColor" />
    </div>
  );
}

export default IconExample;

开发指南

本地开发

克隆仓库并安装依赖:

git clone <repository-url>
cd ido-common
npm install

启动开发服务器:

npm run dev

构建

npm run build

使用 Storybook 进行组件开发

启动 Storybook:

npm run storybook

构建 Storybook 静态网站:

npm run build-storybook

浏览器兼容性

• Chrome (最新版)
• Firefox (最新版)
• Safari (最新版)
• Edge (最新版)

贡献指南

1. Fork 这个仓库
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交你的更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 开启一个 Pull Request

许可证

MIT