跳到主要内容
版本：1.3.2

概述

Raaghu 元素​

基础 UI 构建模块 - 按钮、输入框、卡片等。您应用程序的基础。

使用元素的两种方式​

方式一：从源代码/Storybook​

克隆仓库：

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

使用方法：

// 从本地源代码导入
import RdsInput from '../raaghu-react/src/rds-input';
import RdsCard from '../raaghu-react/src/rds-card';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="邮箱" type="email" />
      <RdsInput label="密码" type="password" />
    </RdsCard>
  );
}

方式二：NPM 包（推荐）​

安装：

## 安装主包
npm install @waiin/raaghu-react

## 安装主题包
npm install @waiin/raaghu-react-themes

设置主题：

import '@waiin/raaghu-react-themes/build/styles/default.css';

使用方法：

import { RdsInput, RdsCard } from '@waiin/raaghu-react';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="邮箱" type="email" />
      <RdsInput label="密码" type="password" />
    </RdsCard>
  );
}

可用分类​

我们有 50+ 个元素，分为 8 个主要类别：

  • 📝 表单 (13) - 输入框、选择器、复选框、滑块、文件上传
  • 🎯 按钮 (6) - 主要按钮、图标按钮、悬浮按钮、切换按钮
  • 📄 显示 (12) - 卡片、排版、头像、徽章、警告
  • 🧭 导航 (9) - 应用栏、标签页、菜单、面包屑、分页
  • 💬 反馈 (9) - 加载器、模态框、工具提示、进度指示器
  • 📐 布局 (5) - 网格、分隔符、容器、背景
  • 🔄 交互 (4) - 手风琴、轮播、搜索、折叠
  • 🔧 专用 (4) - 计数器、步进器、时间线、列表

通用属性​

所有元素都支持标准选项：

  • 尺寸：small、medium、large
  • 变体：不同的视觉样式
  • 状态：disabled、loading、error
  • 样式：className、自定义 CSS

快速开始​

  1. 选择您的方式（NPM 包或源代码）
  2. 选择元素 符合您的 UI 需求
  3. 浏览 Storybook 查看交互示例和完整元素目录
  4. 开始构建 使用上面显示的基本元素

包信息​

  • 单一包：@waiin/raaghu-react 包含所有元素
  • 主题包：@waiin/raaghu-react-themes 用于样式设置
  • 浏览全部：访问我们的 Storybook 查看完整的元素目录
  • Tree-shakable：只导入您需要的内容
  • TypeScript：包含完整类型定义