? 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)
大多数国家的阅读方式都是从左往右的,但是在中东地区,有很多国家,诸如像阿拉伯语、希伯来语,他们的阅读习惯却是从右到左的,恰好是相反的,所有 React Suite 在组件及文档都支持从右到左的的方式(RTL 需求来源 #66)
支持 RTL 的使用步骤
1.1 HTML
确保在 body 上设置了 dir 属性:
<body dir="rtl">
1.2 IntlProvider
在 IntlProvider 组件上设置 rtl 属性,配置所有组件支持 RTL。
ReactDOM.render( <IntlProvider rtl> <App /> </IntlProvider>, document.getElementById('root') );
1.3 postcss-rtl
您需要通过 postcss-rtl
插件来翻转样式。
npm i postcss npm i postcss-rtl
配置 postcss.config.js
module.exports = { plugins: function() { return [require('postcss-rtl')(options)]; } };
关于 postcss-rtl
详细的使用说明,请前往插件 README
2、支持 Carousel 组件
Carousel 组件用于显示一组需要轮播的元素,支持自动翻页,以及个性化配置。
3、Panel 支持 Card 视图
一直有开发者问 React Suite 能不能支持 Card,其实 Card 是可以通过 Panel 组件组合实现 Card 的效果。
3.1 支持 Card
比如以上示例,通过两个 Panel 嵌套实现,只是在本次版本中新增 shaded 属性,可以让 Panel 显示阴影。
const instance = ( <Panel shaded bordered bodyFill> <img src="..." height="240" /> <Panel header="RSUITE"> <p>...</p> </Panel> </Panel> ); ReactDOM.render(instance);
3.2 Panel 与 Grid 组合
4、Timeline 支持更多显示模式
- Timeline 组件新增 align 属性,可以让 Timeline 组件支持多种对齐方式。
- Timeline.Item 支持 time 属性,可以自定义时间轴时间。
5、新增 Affix 组件
Affix 可以辅助导航、按钮等组件固定在可视范围内。常用于内容较长的页面,把指定元素固定在页面可视范围,辅助快速操作。
示例,让一个按钮在距离页面顶部 50px 的时候保持固定:
<Affix top={50}> <Button>Top</Button> </Affix>
6、其他改进及修复
- 在
Uploader
组件上,添加支持fileListVisible
属性,默认为true
, 设置false
则不显示文件列表。 - 导航相关组件添加
renderItem
属性,比如在于 Next.js 的Link
组件组合使用的时候,就可以用到renderItem
属性, 详细使用见示例说明。 - 修复 sideEffects 配置错误导致样式文件丢失的问题。
- 修复了当设置
sticky
并选择了所有选项的时候,不渲染菜单的问题。
7、最后
希望我们的成长,能给更多的开发者带来更好的体验。如果您喜欢 React Suite,可以通过以下方式支持我们:
- Star 这个项目。
- 如果您在您的项目中使用了 React Suite,欢迎在这里留言!
- 在 OpenCollective 上赞助我们。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
专栏来了| 今年双十一,嗨购111小时
又是一年双11,剁手也得先囤课!话不多收,这是我们的双十一福利 ↓↓ 活动时间 2019年11月11日9:00——2019年11月15日24:00,嗨购111小时! 一. 买组合专栏,送免费图书 活动详情: 活动期间,凡订阅组合专栏者(不含补差价用户),可免费领取技术图书一本,限量50本,先到先得。 领取方式? ①成功订阅任一组合专栏②选定图书,书单在此>>>③扫码回复小助手【组合】 组合专栏: 《IT人必备的主流技术》《从虚拟化到容器云的实战之路》《由点及面学Linux》请添加链接描述《一线DBA的进阶指南》《从零到 一 搞定Python》《网络工程师的看家本领》《新时代网工高薪必备技能》《大牛带你解决运维典型难题》《网络工程师高手养成记》《自动化运维必备实战秘籍》请添加链接描述 二. 全场拼团,111小时 活动详情: 活动期间,51CTO订阅专栏,全场拼团价。(原价51元,拼团只要39元) 更多福利? ①生成分享海报>>>https://blog.51cto.com/distribution/summary②邀请朋友拼团,可得现金 三. 进读者群...
- 下一篇
Syncthing 1.3.1 发布,连续文件同步工具
Syncthing是一个免费开源的工具,它能在你的各个网络计算机间同步文件/文件夹,它的同步数据是直接从一个系统中直接传输到另一个系统的,并且它是安全且私密的。1.3.1版本更新如下: Bugfixes: 在 discovery 和 relay 服务器二进制文件中构建缺失的信息 使用情况报告传输统计数据是没有意义的 不忽略仅接收文件夹中更改的文件 显示侦听 UNIX 套接字时的身份验证警告 在远程访问警告中,主机名解析为本地主机不被视为“local” Other issues STUN服务器stun.voxgratia.org被移除 请见发布说明。
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7