RSUITE 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
RSUITE 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
RSUITE 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
RSUITE 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
RSUITE 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

React Suite 是一套 React 组件库,为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架。

UI Design

React Suite 设计原型与规范, 点击查看

支持的平台

浏览器

React Suite 支持最新的,稳定版的全部主流浏览器和平台。 从 React Suite 3 开始不支持 IE9 以下版本(包括 IE9)。不推荐在移动端使用。

IE Edge Firefox Chrome Safari
>=10 >=14 >= 45 >= 49 >= 10

服务端

React Suite 支持服务端渲染, 支持通过 Next.js 构建应用。

支持的开发环境

安装

React Suite 可通过 npm 安装。

npm i rsuite --save

使用

这里有一个简单的示例:

import { Button } from 'rsuite';
import 'rsuite/lib/styles/index.less'; // or 'rsuite/dist/styles/rsuite-default.css'

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

您可以在 CodeSandbox 上查看该示例。

文档

您可以阅读完整文档,或者从下面几个章节开始学习

历史版本:

示例

更新日志

每一个版本的详细变化记录在Release Notes

开发

您可以通过 Trello 查看我们的开发计划,同时希望您能参与其中。

  1. Fork https://github.com/rsuite/rsuite 这个仓库。
$ git clone git@github.com:<YOUR NAME>/rsuite.git
$ cd rsuite
$ npm install
$ npm run dev
  1. Fork https://github.com/rsuite/rsuite.github.io 这个仓库。
$ git clone git@github.com:<YOUR NAME>/rsuite.github.io.git
$ cd rsuite.github.io
$ npm install
$ npm run dev
  1. 您可以开始访问了, 在浏览器输入 http://127.0.0.1:3200/

rsuite.github.io 会依赖 rsuite 中的组件,并支持热更新。

Gitee 用户访问地址: https://gitee.com/rsuite/rsuite

贡献

在开始之前,确保您已读贡献指南

编辑器的配置参考 .prettierrc, 下载编辑的插件 https://prettier.io/

支持 React Suite

如果您喜欢 React Suite,可以通过以下方式支持我们:

  • Star 这个项目。
  • 如果您在您的项目中使用了 React Suite,欢迎在这里留言
  • 在 OpenCollective 上赞助我们。

这个项目的存在归功于所有贡献者。

License

React Suite 基于 MIT licensed 发布。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (12)

加载中
漆工软件作者
rsuite 目前服务于很多中后台分析管理系统,包括不限于:联合利华,百胜集团(肯德基母公司),华为,通用,奔驰, TVB , 腾讯视频,优衣库,爱奇艺,芒果TV,奕欧来等。经过长期时间认证,能够应对各种中后台业务场景,获得认可。 rsuite 由一支足够专业的团队进行维护,拥抱社区,在开发过程中积极吸取社区的优秀设计和经验,希望得到大家的关注和监督。
2019/03/28 17:04
回复
举报
投入项目摸了一周,最终放弃
2018/06/29 20:36
回复
举报
现在喜欢reactjs 但实在不喜欢这种ui组件 material ui也试着用了几天后换了
2018/05/18 12:42
回复
举报
看了一下借鉴了很多Semanticui的东西。不过还是不错加油
2018/05/16 21:46
回复
举报
打分: 力荐
不错!
2018/05/14 17:01
回复
举报
和semanticui非常类似嘛。。又一个轮子?
2018/04/26 23:48
回复
举报
打分: 很差
怎么个配色呀???连组件的轮廓都看不清。。。呵呵,跟ant.design怎么比呢
2018/04/26 22:19
回复
举报
跟antd pro比起来有什么优劣呢
2018/04/26 17:14
回复
举报
打分: 力荐
历害了
2018/04/26 14:42
回复
举报
看了下,有没完整的中后台框架呢?
2018/04/26 10:23
回复
举报
更多评论
发表于大前端专区
2020/12/07 16:37

React Suite 4.8.6 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.8.6 版本发布,更新内容如下: Bugfix: 修复 TagPicker 通过 renderValue 自定义元素不显示的问题。 #1378 Bugfix: 修复 Form 在 inline 模式下布局的间距问题。 #1377 Bugfix: 修复 Modal 设置 overflow 以后,打开时候由于动画会导致内容尺寸改变的...

0
1
发表于大前端专区
2020/07/09 12:19

React Suite 4.8.0 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.8.0 版本发布,更新内容如下: Feature: <InputNumber> 新增支持 scrollable 属性,默认值为 true, 设置为 false 则禁用滚动更新值。 (#1133) Feature: <Whisper> 的 trigger 属性值新增 none 。 #1155 Improve: 改进 <DateRangePicker> 的面板样式,...

2
7
发表于大前端专区
2020/06/05 09:51

React Suite 4.7.2 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.7.2 版本发布,更新内容如下: Bugfix 修复 Steps 组件描述过长后导致布局异常。 (#1100) Bugfix 修复 InputNumber 键盘输入未触发 onChange 事件。 (#1096) Bugfix 修复 Typescript 中存在的类型定义错误。 (#1095,#1103) Bugfix 修复 Dropdown 内 ...

0
5
发表于大前端专区
2020/05/28 12:38

React Suite 4.7.1 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.7.1 版本发布,更新内容如下: Improve: 改进 <TreePicker> 和 <CheckTreePicker> 在搜索时展开节点。 (#1075) Improve: 导出 rsuite 所有组件的 props。 (#1068) Bugfix: 修复了 <Slider> 的最后一个标记的内容未点对齐的问题。(#1079) Bugfix: 修复...

0
5
发表于大前端专区
2020/05/21 14:57

React Suite 4.7.0 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.7.0 版本发布,更新内容如下: Feature: <Table>新增 onRowContextMenu 属性,行点击右键的回调。 (rsuite-table#150) Feature: 新增 <Table.ColumnGroup> 组件,用于表头分组。 (rsuite-table#146) Feature: <AutoComplete> 新增 filterBy属性,用于...

0
5
发表于大前端专区
2020/05/14 17:13

React Suite 4.6.0 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.6.0 版本发布,更新内容如下: Feature: <IntlProvider> 新增支持 formatDate 属性,用于对日期格式化。 (#1036) Feature: 所有 Picker 组件支持动画相关的回调。 (#1042) Improve: HTML 元素的基础样式支持按需导入。 (#1039) Bugfix: 修复了 <Che...

0
10
发表于大前端专区
2020/04/25 00:13

React Suite 4.4.0 版本发布 🎉,带来了一些新特性

家人们啊 👨👩👧👦,React Suite 又双叒叕更新了 🎉,在这全球新冠病毒的笼罩下,希望本次 V4.4.0 发布的新特性能给大家带来一丝丝心情上的改变 😄。 1、Table 支持页面级固定滚动条与表头 为什么有这个功能? 我们看看一个使用场景:一个表格如果一页要显示100 行数据,表格自动高度,表格内部不出现滚动条,通过页面滚动条浏览表格数据,但是,业务要求表格的列又很多,出现了横向滚动条,如果要浏览...

1
5
发表于大前端专区
2020/03/26 13:56

React Suite 4.3.3 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.3.3 版本发布,更新内容如下: Bugfix: 修复了 <InputNumber> 在失去焦点时候,值未改变的情况下也触发了 onChange 事件。 (#923) Bugfix: 修复了 <DateRangePicker> 中错误的 typescript 类型定义。 (#916) Bugfix: 修复了 <Table> 错误的 typescri...

2
7
发表于大前端专区
2020/03/19 14:01

React Suite 4.3.2 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.3.2 版本发布,更新内容如下: Feature: <DateRangePicker> 新增 showOneCalendar 属性,支持只显示一个日历。(#911,#848) Bugfix: 修复了 <Table> 在数据更新后,滚动条位置未重重的问题。 (rsuite-table#136) Bugfix: 修复了 <Table> 缺少 Typesc...

0
6
发表于大前端专区
2020/03/13 17:46

React Suite 4.3.1 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.3.1 版本发布,更新内容如下: Bugfix: 修复本地语言渲染错误的问题。 (#903) Bugfix: 修复 Table 列设置 resizable 以后拖拽列宽不工作的问题。 (rsuite-table#135) Bugfix: 修复 Panel 组件嵌套 Icon 重复显示的问题 (#894) Bugfix: 修复 Paginati...

0
4
发表于大前端专区
2020/03/05 18:30

React UI 库 React Suite 4.3.0 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.3.0 版本发布,更新内容如下: Feature: 新增支持阿拉伯语,芬兰语,瑞典语和丹麦语。 (#849,#821) Feature: <Table> 的 renderTreeToggle属性新增 expanded 参数。 (rsuite-table#130) Feature: <Table.Column> 上新增 treeCol 属性,指定 Tree 显示...

0
7
发表于大前端专区
2020/02/02 11:14

React UI 库 React Suite 4.2.1 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.2.1 版本发布,更新内容如下: Bugfix: 修复了 script-src 内容安全策略(CSP)的问题。 (#830) Bugfix: 修复了 <AutoComplete> 组件使用 enter 选择时候 onSelect 回调未被调用的问题。(#828) Bugfix: 修复了 xs <Datepicker> 图标的垂直对齐方式。...

0
4
发表于大前端专区
2020/01/02 15:27

React Suite 4.2.0 版本发布

React Suite 首先在这里祝福大家新年行大运 🎉,事事都顺心 ❤️️。我们也会在新的一年里为大家带来更多特性,帮助更多开发者快速构建更优质的产品。 在 2019 年的 11 月份我们发了 4.1 版本,两个月后的今天为大家带来 4.2 版本的更新。接下来为大家介绍一下更新内容。 1、新增组件 RangeSlider <Slider> 是一个滑动输入控件,但是不能选择一个范围,所有在本次版本中新增了一个组件 <RangeSlider> ,专门用于范围滑...

0
3
发表于大前端专区
2019/12/19 18:52

React UI 库 React Suite 4.1.5 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript,支持 RTL,支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.1.5 版本发布,更新内容如下: Feature: Picker 相关组件添加了 virtualized 属性.(#786) Bugfix: 修复了 <CheckTreePicker> 复选框样式问题。(#786) Bugfix: 修复了 RTL 相关的 Bug。 (#779) Bugfix: 修复 <Icon> rotate 属性无效的问题。 (#790) I...

1
5
发表于大前端专区
2019/12/12 13:09

React UI 库 React Suite 4.1.4 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript, 支持 RTL, 支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.1.4 版本发布,更新内容如下: Improve: 优化了 Table 组件在渲染大数据时候性能。 (rsuite-table#120) Chore: 调整了 sideEffects 配置。 (#774)...

4
6
发表于大前端专区
2019/12/05 20:52

React UI 库:React Suite 4.1.3 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript, 支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.1.3 版本发布,更新内容如下: Bugfix: 修复了一些样式问题。 (#770,#771,#767) Bugfix: 修复了无法在组件的异步回调中获取 Event 对象的问题。 (#763) Bugfix: 修复了 <DateRangePicker> 上一月与下一月未禁用的问题。 (#747) Bugfix: 修复了 <DateRangePick...

0
3
发表于大前端专区
2019/11/14 12:12

React Suite 4.1.1 版本发布,Table 表头支持页面级固定

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript, 支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.1.1 版本发布,更新内容如下: Feature: 在 <Table> 组件上新增 affixHeader 属性,可以让表头页面级固定。(#720,rsuite-table#105) Feature: 在 <Cascader> 与 <MultiCascader> 组件上新增 inline 属性。 (#724) Bugfix: 修复了日期中文格式化字符过长而导致 ...

2
4
发表于大前端专区
2019/11/07 20:58

🎉 React Suite 4.1.0 版本发布,支持 RTL

React Suite 在两个月前发布了 4.0 版本,支持 Dark 模式,让越来越多的开发者注意到它是一个注重国际化与可访问性的 UI 组件库。在两个月后的今天迎来了 4.1 版本发布,在本次版本中我们新增与改进了一些组件,同时让组件支持 Right-to-left (RTL),能够为持阿拉伯语和希伯来语等语言提供更好的服务。接下来我们来看一下4.1 版本更新的内容。 1、支持 Right-to-left (RTL) 大多数国家的阅读方式都是从左往右的,但是在中东地区...

0
7
发表于大前端专区
2019/10/31 11:04

React UI 库:React Suite 4.0.5 版本更新

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript, 支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.0.5 版本发布,更新内容如下: Improve: 使用 context API 重构部分子父组件传参的逻辑。 (#695) Improve: 调整了所有 Picker组件的 preventOverflow 属性的实现方式。 (rsuite-utils#14) Bugfix: 修复 <Alert> 组件在 dark 主题下字体颜色问题。 (#697) Bugfi...

0
4
发表于大前端专区
2019/10/17 15:30

React Suite 4.0.4 版本更新,React UI 库

React Suite 是一套 React 组件库,为后台产品而生,支持 Typescript, 支持服务端渲染。 文档: https://rsuitejs.com 设计: https://rsuitejs.com/design/default/ V4.0.4 版本发布,更新内容如下: Bugfix: 修复了 Dropdown, Button 与 ButtonGroup 垂直对齐的问题。 (#682) Bugfix: 修复了 CheckTreePicker 数据改变后出现错误的问题 (#681) Bugfix: 修复了 Schema.Types.StringType 中的 isOneOf 方法无效的问题。 (schema-...

0
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于开发技能专区
2016/08/27 16:33

一套 React 的 UI 组件库: RSUITE

### 关于 RSUITE ------ - https://github.com/rsuite - http://rsuitejs.com RSUITE `[ɑː(r)swiːt]` 是一套 React 开发的 UI 组件库,提供 Bootstrap 设计体系的常用组件,并且会在此基础上持续开发一些高级组件。 我们的目标就是让 WEB 开发更快捷,同时具有一定的灵活性和扩展性。 加入 [![Discord](https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg)](https://discord.gg/GmPXTH3) ,直接与开发...

0
25
发表于大前端专区
2019/01/18 15:06

开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件

## 背景 有这样一个需求,一位 React Suite(以下简称 [rsuite][rsuite])的用户,他需要一个 Table 组件能够像 [Jira Portfolio](https://www.atlassian.com/software/jira/portfolio) 一样,支持树形数据,同时需要支持大数据渲染。 截止到目前(2019年1月18日)为止,开源 UI 库中没有找到可以支持的组件,所以 [rsuite][rsuite] 在最新的版本中支持这一特性。 接下来,我们看一下 [rsuite][rsuite] 中是怎么支持这两个功能?...

3
43
2018/12/17 18:57

React UI 库:React Suite 3.4.5 版本更新

React Suite 是一套 React 组件库,为后台产品而生。 文档: https://rsuite.gitee.io Discord: https://discord.gg/R8mnjwh Gitter: https://gitter.im/rsuite/rsuite V3.4.5 版本发布,更新内容如下: Breaking: 调整所有 Picker 组件的 renderValue 方法的回调参数 (#307) Feature: 为 <DateRangePicker> 的 disabledDate 方法添加了一些工具方法 (#304) Feature: <RadioGroup> 支持 appearance 属性, 让 Radio 看上去像一个 ...

0
0
发表于大前端专区
2017/09/10 10:36

小而美的 React Form 组件

## 背景 之间在一篇介绍过 Table 组件[《React 实现一个漂亮的 Table》](http://blog.hypers.io/2017/09/03/rsuite-table/) 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table、 Form、 Chart,在处理 Table 的时候我们遇到了很多问题。今天我们这篇文章主要是分享一下 Form 组件,在业务开发中, 相对 Table 来说,Form 处理起来更麻烦,不是所有表单都像注册页面那样简单,它往往需要处理非常多的逻辑...

1
5
发表于大前端专区
2018/04/25 11:56

React Suite v3.0 正式版发布

相信很多人会好奇,React Suite 是什么? ![](https://user-images.githubusercontent.com/1203827/39224361-97311134-4879-11e8-9154-726f5cc38223.png) React Suite 是 HYPERS 前端团队和 UX 团队开源的一套基于 React 的 UI 组件库,能够帮助您快速构建一个企业级应用。 官网访问地址: [rsuitejs.com](https://rsuitejs.com) ## 为什么选择 React Suite ? 我们在服务于很多企业的过程中发现,不管是大企业,还是中小企业都有...

4
0
2020/12/24 14:18

React PC端框架

1. Ant Design Ant Design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。非常符合国人的审美需求。并且在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高,开箱即用。支持浏览器、服务端渲染以及Electron环境。包括刚刚推出支付宝小程序也是这一套设计风格。可谓国人开发React应用必修科目。 中文文档 | github地址 Ant Design 2. Material-UI 一款React组件库来实现Google的Material Design风...

0
0
发表了博客
2019/03/09 01:03

React PC端框架

1. Ant Design Ant Design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。非常符合国人的审美需求。并且在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高,开箱即用。支持浏览器、服务端渲染以及Electron环境。包括刚刚推出支付宝小程序也是这一套设计风格。可谓国人开发React应用必修科目。 中文文档 | github地址 Ant Design 2. Material-UI 一款React组件库来实现Google的Material Design风...

0
0
发表于大前端专区
2019/08/01 10:51

这些 UI 框架都存在对比度问题

### 背景 作为一个 UI 框架开发者,越来越多的人反馈给我同一个问题:网页中一些链接的对比度有些低,导致在个别显示器上存在看不清的问题。对一些服务于中后台产品的 UI 框架来说,中老年的老板是一个特殊的群体,往往视力都没那么好,所以网页上文本的对比度就显得尤为重要。 不知道大家有没有注意到 Chrome 浏览器的控制台,在查看元素的 Styles 的时候,CSS color 属性的取色器有一个 Contrast ratio 属性,如下图: ![](ht...

0
0
发表于大前端专区
2018/08/28 18:33

让 Markdown 中的代码可以实时运行

## 背景 让 Markdown 中的代码可以实时运行,为什么会有这样一个需求? 在我们前端团队中,技术相关的文档都采用 Markdown 编写, 文档中往往会伴随很多示例代码,我们希望大家在阅读文档的时候,可以运行示例代码,看到效果。 ## 需求 - 让 Markdown 中的代码可以运行,并预览效果。 - 代码可以在线编辑。 - 不影响整个文档流的布局。 - 支持 React, 支持代码高亮。 - 可以配置 babel。 明确需求以后,写了一个 React 组件来满...

0
0
发表于大前端专区
2019/03/01 16:46

前端多端跨平台统一框架

移动端跨平台开发框架 UPDATE:2020/4/16 uniapp开始部分支持快应用开发。 UPDATE:微信也正式加入多端大战了,https://github.com/Tencent/kbone 各框架比较 https://ask.dcloud.net.cn/article/35947 *上图严格来讲wepy不是多端框架,只是用vue写小程序;而myvue也是2.0版本后才加入 另一篇比较文章,传送门,结论是:uni-app > taro > mpvue > 原生微信小程序、wepy https://cml.js.org/#/ 滴滴变色龙 https://weex.apache....

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
12 评论
186 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部