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
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 上赞助我们。