V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
simonguo
V2EX  ›  分享创造

一套 React 的 UI 组件库: RSUITE

  •  
  •   simonguo · 2017-03-25 07:51:09 +08:00 · 2610 次点击
    这是一个创建于 2823 天前的主题,其中的信息可能已经有所发展或是发生改变。

    关于 RSUITE


    RSUITE [ɑː(r)swiːt] 是一套 React 开发的 UI 组件库,提供 Bootstrap 设计体系的常用组件,并且会在此基础上持续开发一些高级组件。

    我们的目标就是让 WEB 开发更快捷,同时具有一定的灵活性和扩展性。

    加入 Discord ,直接与开发者沟通。

    特性

    • 基于 React 组件化开发模式
    • 丰富、漂亮 UI 组件
    • 支持多主题切换
    • 支持响应式布局
    • 支持 ES2015

    版本

    npm Travis


    安装

    npm install rsuite --save
    

    示例:

    // ES2015
    const { Button } = require('rsuite');
    
    // CommonJS
    var Button = require('rsuite').Button;
    
    // AMD
    define(['rsuite'], function(Suite) {
      var Button = Suite.Button;
      ...
    });
    
    
    ReactDOM.render(<Button>Button</Button>, mountNode);
    

    主题

    • 可以直接引入 css
    <link rel="stylesheet" href="//t.hypers.com.cn/libs/rsuite/css/0.1.0/rsuite.min.css">
    
    • 可以通过 rsuite-theme 管理,只需要配置一个系统主色,自动生成系统配色方案。

    浏览器支持

    默认支持 IE9+, chrome , safari , Firefox 等主流浏览器,如果想要支持 IE8 及以下的浏览器,需要引入 html5shives5-shim, 来处理对 HTML5 标签ECMAScript5 兼容性问题

    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
    <![endif]-->
    

    相关链接:

    9 条回复    2017-03-25 17:10:24 +08:00
    likezun
        1
    likezun  
       2017-03-25 08:56:16 +08:00
    轮子?
    notes
        2
    notes  
       2017-03-25 08:56:45 +08:00 via Android
    支持,目前文档不够完善,看了看就没了
    simonguo
        3
    simonguo  
    OP
       2017-03-25 09:33:34 +08:00 via iPhone
    @notes 谢谢,我们会把文档跟进上的
    learnshare
        4
    learnshare  
       2017-03-25 10:21:43 +08:00
    simonguo
        5
    simonguo  
    OP
       2017-03-25 10:33:43 +08:00 via iPhone
    @learnshare 谢谢了,你是在什么环境上,什么浏览器啊?
    learnshare
        6
    learnshare  
       2017-03-25 12:53:12 +08:00
    @simonguo http://t.hypers.com.cn/libs/rsuite/css/0.1.0/rsuite.min.css 被 uBlock 里的一条规则命中,屏蔽掉了
    simonguo
        7
    simonguo  
    OP
       2017-03-25 15:14:40 +08:00
    @learnshare 好的,我处理一下
    simonguo
        8
    simonguo  
    OP
       2017-03-25 17:06:23 +08:00
    @learnshare 已修复
    learnshare
        9
    learnshare  
       2017-03-25 17:10:24 +08:00
    @simonguo 确认修复 ✔️
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5168 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 06:42 · PVG 14:42 · LAX 22:42 · JFK 01:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.