NextUI 项目技术文档

NextUI 项目技术文档

nextui 🚀 Beautiful, fast and modern React UI library. 项目地址: https://gitcode.com/gh_mirrors/ne/nextui

1. 安装指南

1.1 环境要求

• Node.js 14.x 或更高版本
• npm 或 yarn

1.2 安装步骤

使用 npm 安装

npm install @nextui-org/react

使用 yarn 安装

yarn add @nextui-org/react

2. 项目的使用说明

2.1 引入 NextUI

在你的 React 项目中引入 NextUI：

import { NextUIProvider } from '@nextui-org/react';
import { Button } from '@nextui-org/react';

function App() {
  return (
    <NextUIProvider>
      <Button>Hello</Button>
    </NextUIProvider>
  );
}

export default App;

2.2 使用组件

NextUI 提供了丰富的组件，如按钮、输入框、卡片等。以下是一些常用组件的使用示例：

按钮组件

import { Button } from '@nextui-org/react';

function MyComponent() {
  return (
    <Button color="primary">Primary Button</Button>
  );
}

输入框组件

import { Input } from '@nextui-org/react';

function MyComponent() {
  return (
    <Input placeholder="Enter your name" />
  );
}

3. 项目 API 使用文档

3.1 NextUIProvider

NextUIProvider 是 NextUI 的核心组件，用于包裹整个应用，提供主题和全局配置。

属性

• theme: 自定义主题配置。
• children: React 节点，通常是整个应用的根组件。

3.2 Button

Button 组件用于创建按钮。

属性

• color: 按钮颜色，可选值为 primary, secondary, success, warning, error。
• onClick: 点击事件回调函数。
• disabled: 是否禁用按钮。

3.3 Input

Input 组件用于创建输入框。

属性

• placeholder: 输入框的占位符文本。
• onChange: 输入事件回调函数。
• disabled: 是否禁用输入框。

4. 项目安装方式

4.1 通过 npm 安装

npm install @nextui-org/react

4.2 通过 yarn 安装

yarn add @nextui-org/react

4.3 手动安装

如果你不想使用包管理器，可以直接从 GitHub 下载源码并手动引入：

git clone https://github.com/nextui-org/nextui.git
cd nextui
npm install
npm run build

然后将生成的 dist 目录中的文件引入到你的项目中。

---

通过以上步骤，你可以轻松地安装和使用 NextUI 组件库，构建美观、快速且现代的 React 应用。

nextui 🚀 Beautiful, fast and modern React UI library. 项目地址: https://gitcode.com/gh_mirrors/ne/nextui