rsuite

前端 框架
一套 React 的 UI 组件库
12小时前 2 1 我要收藏

RSUITE


RSUITE [ɑː(r)swiːt] 是一套基于 React 开发的 UI 组件库,产生于 HYPERS 前端团队,是面向企业级后台产品的一套前端解决方案。

RSUITE 目标就是让 WEB 开发更快捷,同时具有一定的灵活性和扩展性,致力于改善前端工程师的开发体验。


版本与状态

npm Travis Coverage Status

codebeat badge

社区

Discord

快速开始


安装:

npm i rsuite --save

示例:

import { Button } from 'rsuite';

ReactDOM.render(<Button>Button</Button>, mountNode);

创建一个 RSUITE 应用

通过 create-rsuite-app 快速创建一个 RSUITE 应用。 另外,应用中还集成了以下内容:

  • Redux: 数据流管理
  • React Router: 路由管理
  • React Intl: 国际化
  • ESLint: 代码检查
  • Webpack: 应用构建及开发环境搭建
  • Babel: 代码编译

详细参考 dependencies

安装:

npm i -g yo
npm i -g generator-create-rsuite-app

创建项目:

# 创建并进入项目文件夹
mkdir your-project && cd your-project

// 使用脚手架安装项目
yo create-rsuite-app

运行项目:

等待 npm install 安装完成后,执行下面命令,打开 localhost:3002 即可运行项目。

npm run dev

使用中如果存在问题,提交 issues

主题相关

  • 方式 1 :引用 less 文件
// 如果需要使用一些拓展组件,应该引入组件样式
@import "~rsuite-table/lib/less/index";

// 引入 RSUITE 样式
@import "~rsuite-theme/dist/less/rsuite";

// 修改主题颜色,不设置则使用 RSUITE 默认颜色
@base-color: #6292f0;

// 可以修改主题中的变量参数,来自定义自己的主题
// 参考 https://github.com/rsuite/rsuite-theme/blob/master/src/less/variables.less
  • 方式 2 : CDN
<link rel="stylesheet" href="https://unpkg.com/rsuite-theme/dist/css/rsuite.min.css" />

使用中如果存在问题,提交 issues

rsuite 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论(2)