React Suite 4.4.0 版本发布 🎉,带来了一些新特性
家人们啊 👨👩👧👦,React Suite 又双叒叕更新了 🎉,在这全球新冠病毒的笼罩下,希望本次 V4.4.0 发布的新特性能给大家带来一丝丝心情上的改变 😄。
1、Table 支持页面级固定滚动条与表头
为什么有这个功能? 我们看看一个使用场景:一个表格如果一页要显示100 行数据,表格自动高度,表格内部不出现滚动条,通过页面滚动条浏览表格数据,但是,业务要求表格的列又很多,出现了横向滚动条,如果要浏览表格最右侧列的数据,首先需要页面滚动到最底部,然后再操作横向滚动条,想想这整个过程就很难受 😭。如果你的业务没办法通过修改设计解决,那这个新特性对你来说应该"真香" 😋, 先看看效果:
新增属性:
{ affixHeader: boolean|number affixHorizontalScrollbar: boolean|number }
affixHeader
将表头固定到页面上的指定位置affixHorizontalScrollbar
将横向滚动条固定在页面底部的指定位置
😈破坏性变更
Table 在实际的业务中,往往都需要在数据更新后重置滚动条的位置,但是在某些业务情况下又不能重重滚动条位置,比如异步加载 Tree 节点,表格内编辑等等。在 V4.4.0 之前版本的处理逻辑是根据数据行数发生变化,同时不是 TreeTable 情况下的数据更新会重重滚动条。但是,在实际的业务中还是有很多复杂的业务情况,所以在这个版本中新增了 API 让开发者自己控制是否更新滚动条。
{ shouldUpdateScroll:boolean; onDataUpdated:(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void; }
shouldUpdateScroll
数据更新后更新滚动条位置,默认为 true。onDataUpdated
数据更新后的回调函数。
2、新增 Rete 组件
一个评分组件,表示用户对内容的的评价。
示例代码
<Rate defaultValue={2.5} allowHalf />
支持的功能包括:
- 支持设置组件大小。
- 支持设置组件的颜色。
- 支持半选,及垂直半选。
- 支持禁用与只读,在表单中使用。
- 支持使用其他 Icon、emoji、数字、中文或是其他 SVG 图标。
3、Tree 组件新增支持拖拽
在需要对一个树结构的数据进行调序,修改层级的时候,Tree 的拖拽功能能够很方便实现这个操作。只需要为 Tree 组件设置一个 draggable
属性。
<Tree draggable data={data} />
4、DatePicker 支持 12 小时制 🕒
DatePicker 默认时间的选择是 24 小时制,12 小时制是业务中经常会用到的一种方式。所以新增了一个 showMeridian
属性,用于支持 12 小时制。
<DatePicker showMeridian format="YYYY-MM-DD HH🇲🇲ss" />
5、Progress 支持垂直显示
<Progress.Line>
组件新增 vertical
属性,垂直显示进度条。
<Progress.Line vertical />
6、支持自定义浮层
Whisper 组件可以监听一个元素,对元素进行操作时候,会在其周围打开一个浮层,用于相关信息的提示,比如 Popover 与 Tooltip。
<Whisper trigger="click" speaker={<Popover>popover!</Popover>} > <Button>click me</Button> </Whisper>
在这次的版本中,Whisper 可以支持打开一个自定义的浮层。
const Overlay = React.forwardRef(({ style, ...rest }, ref) => { const styles = { ...style, background: '#000', padding: 20, borderRadius: 4, position: 'absolute', boxShadow: '0 3px 6px -2px rgba(0, 0, 0, 0.6)' }; return ( <div {...rest} style={styles} ref={ref}> Overlay </div> ); }); const App = () => ( <Whisper trigger="click" speaker={(props, ref) => { const { className, left, top } = props; return <Overlay style={{ left, top }} className={className} ref={ref} />; }} > <Button>Test</Button> </Whisper> );
7、其他更新
- Feature: 新增对意大利语言支持。
- Feature:
<TagPicker>
组件支持tagProps
,设置 Tag 属性。 - Feature:
<Affix>
支持container
属性,把元素只在容器可见范围内才固定。 - Feature: 所有带搜索功能的 Picker 组件支持
searchBy
属性,可以自定义搜索规则。 - Breaking: 修复 Uploader 属性
dragable
拼写错误,修改为draggable
。 - Improve: 改进所有的 Picker 组件,默认支持
size
属性,之前的版本中需要配 Button 组合使用。 - Improve 改进
<Placeholder>
的动画效果。 - Bugfix: 修复
<Table>
的wordWrap
属性与rowHeight
不兼容的问题。 - Bugfix: 修复 Typescript 一些定义错误。
- Example: 新增示例项目 with-preact。
- Chore: 迁移
rsuite-utils
库到rsuite
,方便维护。
8、最后 🤝
希望我们的成长,能给更多的开发者带来更好的体验。如果您喜欢 React Suite,可以通过以下方式支持我们:
- Star 这个项目。
- 如果您在您的项目中使用了 React Suite,欢迎在这里留言!
- 在 OpenCollective 上赞助我们。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
L7 2.2 地图绘制功能上线
大数据,物联网,5G时代 LBS 数据应用领域越来越广泛,特别是精准位置营销,设备,人员流动管理等基于位置的管理、监控需求。在地理数据可视化需要提供基础多边形的绘制,编辑等功能。 地图绘制功能 绘制UI组件 L7 支持地理绘制UI组件,UI组件支持垂直、水平两种布局,可自由配置图形绘制类型。 import { DrawControl } from '@antv/l7-draw'; const drawControl = new DrawControl(scene, { position: 'topright', layout: 'vertical', // horizontal vertical controls: { point: true, polygon: true, line: true, circle: true, rect: true, delete: true } }); scene.addControl(drawControl); CDN 引入 <script src="https://unpkg.com/@antv/l7-dr...
- 下一篇
FreeNAS 11.3-U2.1 发布,基于 FreeBSD 的小型操作系统
FreeNAS 11.3-U2.1现已发布。FreeNAS 是一份基于 FreeBSD 的小型操作系统,它提供免费的网络附加存储(NAS)服务(CIFS、FTP、NFS)。 11.3-U2.1 是 11.3-U2 的修补程序版本,只解决了导出和销毁pools时的一个关键问题。(NAS-105782 Link)。这个版本几乎包含 150 个错误修复、更新和改进,一些重点更新内容包括有: Samba 版本 4.10.13 的更新(NAS-105349) 导入pool时的错误修复(NAS-105297) 修复了中间件内存泄漏(NAS-104437) 特定 LSI 9X00 卡的缓解措施(NAS-105568) 有关更新的完整详细列表,可参阅FreeNAS 11.3-U2 Jiratickets列表。
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果