介绍

React Suite是一套转为后端打造的企业级UI组件库,它由 HYPERS 前端团队与 UX 团队共同打造,在经历了几次大版本更新后,积累了大量的通用组件和功能,而且支持 Typescript 与 Flow, 支持服务端渲染。

官方网站

https://rsuite.gitee.io/#/

https://github.com/rsuite/rsuite

https://gitee.com/rsuite/rsuite

平台支持

  • 浏览器端

React Suite支持目前市面上主流的浏览器,在3.0版本以后不支持IE9及以下,移动端端不推荐使用,总体如下截图,来源于官网

  • 服务端

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

开发环境支持

  1. 支持 React 16 +
  2. 支持 TypeScript
  3. 支持 Flow
  4. 支持 Electron

示例

官网提供了很多中示例模板,可以在下载体验

  • 管理系统(https://github.com/rsuite/rsuite-management-system)
  • 模块化按需加载(https://github.com/rsuite/examples/tree/master/modular-import)
  • CDN 引入(https://github.com/rsuite/examples/tree/master/cdn)
  • 国际化方案(https://github.com/rsuite/examples/tree/master/intl-app)
  • 多主题方案(https://github.com/rsuite/examples/tree/master/multiple-themes)
  • 在 create-react-app 中使用(https://github.com/rsuite/examples/tree/master/create-react-app)
  • 在 Flow 中使用(https://github.com/rsuite/examples/tree/master/flow-app)
  • 在 TypeScript 中使用(https://github.com/rsuite/examples/tree/master/typescript-app)
  • 在 Next.js 中使用(https://github.com/rsuite/rsuite-management-system-ssr)

下面是一个DEMO截图

官网提供了多个使用方法,我在这里就不介绍了,可以直接到官网查看

组件介绍

既然是一套完整的UI组件库,其组件必然是相当的丰富,我们有选择性的查看以下

  • 通用组件

按钮

图标

tooltip

alert

通知

模态框

侧边栏弹出

  • 导航组件

顶部

侧边

分步

分页

  • 数据表单

表单组件太多就不一一截图了,日常使用的基本组件都有

  • 数据展示(支持虚拟化,赞)

表格

复选框

时间轴

组件太多,仅仅选择性的截了几张图,更多组件实例可以到官网体验。

原型设计

这个功能非常的厉害,提供了原型设计,这就给设计师和工程师提供了便捷,官网提供在线原型设计,非常的给力

总结

优秀的框架市面上有很多,不论是哪一款,只要能有效的解决我们的问题,那么就是好框架,节省了我们本身大量的时间,提升了工作效率,而且国产中良心的不多,之前文章推荐的阿里的Fusion Desgin更加强大,欢迎大家阅读,感谢支持!

厉害的组件_企业级React UI组件库——React Suite相关推荐

  1. 组件cdn引入_高性能 React UI组件库SHINEOUT

    今天给大家推荐一款超不错的React.js桌面端UI组件库Shineout. shineout 基于react.js构建的轻量级UI组件库.包含表单元素.数据表.通知提示.布局选项.导航等多种组件. ...

  2. 最佳 React UI 组件库,前端开发必备!

    上次推荐了12个 Vue UI组件库,今天来推荐几个 GitHub 上流行的 React UI 库! 1. Ant Design GitHub 上超过 269 k 个项目使用了 Ant Design ...

  3. element ui input视图没刷新_聊聊前端 UI 组件:组件体系

    本文是文章系列「聊聊前端 UI 组件」的第三篇. 在本系列的上篇文章<聊聊前端 UI 组件:组件特征>中,通过从关注点分离的角度进行前端 UI 组件的构成分析,并以较为抽象的视角对 UI ...

  4. 【独立篇】React UI组件库

    文章目录 1.React UI组件库 1.1.material-ui(国外) 1.2.ant-design(国内蚂蚁金服-antd) 2.AntD的简单使用 2.1.CODE 2.2.Result 1 ...

  5. React UI 组件库

    上篇文章中写了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJS的UI组件库. 一.Material- ...

  6. React UI 组件库 Chakra UI - 02 颜色模式

    Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...

  7. React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用

    Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...

  8. React UI 组件库 Chakra UI - 05 案例实践

    案例实践 使用 create-react-app 新建项目. 表单 使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...

  9. vue 筛选组件_记一个复杂组件(Filter)的从设计到开发

    此文前端框架使用 rax,全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog 前言 貌似在面试中,你如果设计一个 react/vue 组件,貌似已经是司空见惯的问题了 ...

最新文章

  1. RESTful之限流Throttling
  2. V-rep学习笔记:机器人模型创建2—添加关节
  3. 英语美句-每日积累-02
  4. EFCore废弃了TransactionScope取而代之的Context.Database.BeginTransaction
  5. 纪事日记–可自定义的数据存储
  6. 怎么用c语言做出等妖三角形_初二数学培优,怎么用顶点坐标求三角形面积?割补法这样用很简单...
  7. Jmeter_http request的简单设置和应用
  8. 使用nmap发现家庭wifi下的存活设备
  9. 【Vue2.0】—事件处理和事件修饰符(二)
  10. 【Java】注解 @Value 你真的会用么
  11. Machine Learning Basics(要点)
  12. JAVA上传文件 DiskFileUpload组件
  13. STM32F4最小系统硬件设计
  14. 最简单的全球基站定位接口API
  15. 宇宙生命进化的八大密度
  16. 摩托车新手驾驶教程[1]
  17. 江苏工匠杯_unseping_wp
  18. L和S波段SAR信号穿透深度评估(Matlab代码实现)
  19. python在windows command下打印中文出错 IOError [Errno 22] Invalid argument
  20. 立创EDA仿真入门1 基本操作

热门文章

  1. 小坑记录:get_cmap参数区分大小写
  2. ORM学员管理系统单表查询示例
  3. Redis笔记系列(特别总结篇)——常见配置redis.conf知识点总结
  4. 浅析机器视觉在安防行业的应用
  5. C#开发学习——web服务器端控件
  6. Guava库学习:学习Collections(二)Lists
  7. Django   MVC
  8. 解决 WIn7 启动时“你有等待写入光盘的文件”
  9. [转贴] 游戏服务器架构二
  10. 散列算法 SHA-1,SHA-2和SHA-256之间的区别