阅读 593

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