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