华人澳洲中文论坛

热图推荐

    Zarm 3.0 正式公布!

    [复制链接]

    2023-3-11 15:17:34 44 0

    前言
    跟着前端技术的突飞猛进、react v18 的公布和本身业务的开展,基于 React 的挪动端组件库 Zarm,降级势在必行,通过团队多月研发和打磨,在 2023 年春季开始的时分,Zarm 3.0 终于要和大家见面了。


    目录
    一、新组件
    二、体验降级
    三、从能用到好用
    四、主题多样化及定制才能
    五、将来
    六、最初
    一、新组件
    在新版本中,咱们减少了 10+ 全新的组件,它们是基于咱们本身的业务虚践而开发。这些组件通过谨严的推敲,确保了其通用性和扩展性,置信它们将为用户带来更好的使用体验。
    Skeleton 骨架屏:在界面等候加载区域展现占位图形。
    WaterMark 水印:展现页面版权一切者信息,内容泄漏后以便追溯。
    Grid 宫格:在程度标的目的上把页面分隔成等宽度的区块,用于展现等宽内容或进行页面导航。
    Rate 评分:对事物进行评级操作,丰硕了表单交互的方式
    Image 图片:提供 5 种图片填充模式,反对懒加载、加载中/加载失败占位和回调
    以及提供了 5 个罕用的 hooks ,帮忙各位开发者解决常见交互问题。
    useClickAway 单击内部跟踪器
    useInViewport 进入阅读器窗口
    useLongPress 长按
    useOrientation 屏幕标的目的
    useScroll 转动
    二、体验降级
    在 3.0,咱们进行了一次片面的组件重构,将一切组件从类组件重写为函数式组件,这个变动将为开发者们带来更好的使用体验和更高的机能表示。
    01 手势交互细节
    咱们使用了use-gesture,它提供了更为灵活、牢靠的手势辨认才能,让用户能够更为天然地操作,进步用户的交互体验。
    02 流利的动画
    目前咱们使用了react-transition-group作为动画库,它使用了一些优化伎俩,能够在包管动画流利性的同时,最大限制地增加机能开消,为运用带来更为生动、流利的动效。
    03 视觉降级
    同时,咱们结合了IOS 16 组件库设计资源,对部份组件的 UI 细节进行了调剂,放弃了组件视觉的总体统一性和总体好看度,让用户能够享用到更为优秀的视觉体验。
    三、从能用到好用
    咱们还优化了组件的设计和 API,以更好地知足开发者们的需要。
    01 指令式调用
    首先,咱们对一切弹层交互组件减少了指令调用形式,这样就再也不需求添加少量的代码来完成弹层的形态办理,只需经过简略的指令式调用,就能在任何中央轻松使用弹层组件。


    反对指令式调用的组件:
    Modal
    Picker
    DatePicker

    ActionSheet
    Cascader
    Toast
    02 挂载监听节点的全局配置
    其次,咱们提供了全局配置一致办理组件默许的挂载节点与转动监听节点,解决微前端挂载节点变卦的需要。


    03 日期组件
    此外,咱们对日期组件也进行了改进,移除了内置预设模式,调剂为更为灵敏的时间类型列进行配置,而且减少了“周”时间类型和十二小时制。


    另外,还减少了对时间类型值过滤的 API。


    04 片面拥抱 TypeScript
    咱们将 TypeScript 运用于全部组件库和组件款式,而且将这些类型进行了导出,这象征着咱们能够为开发者提供更好的类型平安和编纂器反对,以及更易避免一些潜伏的过错,帮忙咱们更好地构建牢靠的运用顺序。
    05 组件拆分和API整合
    咱们把在 2.x 一些设计分歧理的部份组件做了一些调剂,为了更合乎功用含意、便于记忆、使用预期更明白。
    例如:
    CustomInput 和 Input 别离
    ActivityIndicator 重命名 Loading
    StackPicker 重命名 Cascader,而且动画和交互调剂为 Tabs + Radio
    总而言之,这些变动将帮忙开发者们更为轻松地完成他们的名目需要,并带来更好的用户体验。
    四、主题多样化及定制才能
    01 CSS Variables 静态主题
    在过来的版本中,Zarm 提供了一套默许的主题款式,开发者只能在编译时乃至是款式掩盖对默许主题进行微调,然而,关于一些需求更为静态的主题变动的运用顺序来讲,这些动态的主题款式可能无奈知足需要。当初,咱们提供了全新的静态主题功用,而且提供了几种不同的形式来静态地改动 Zarm 默许主题。
    全局配置


    组件内联


    02 自定义内容渲染
    在新版本中,除了 Checkbox/Radio 预设款式外,咱们提供了显示元素的自定义渲染函数,开发者能够按照实际的业务场景定制开发。


    不只如斯,咱们一样凋谢了 Keyboard 源数据自定义的才能,这个功用十分合适那些需求特定的业务场景,好比车牌键盘等等。


    五、将来
    总的来讲,Zarm 3.0 带来了许多改进和新特性,使得 Zarm 变得更为易于使用和定制,后续咱们方案提供更多的组件,在未来咱们也会在 CSS in JS、headless UI 做更进一步的探究。而且在知足挪动端 Web 开发根底上,咱们也在踊跃的发现更多平台的适配问题,好比小顺序。
    六、最初
    关于还在使用 Zarm 2.x 或更早的版本,咱们也筹备了完美的迁徙指南[1]
    最初感激社区同窗参预 Zarm 3.0 的开发:faner十一、tgioer、jiyingzhi、JunIce、nemoisme
    [1]迁徙指南:http://zarm.design/#/docs/migration-v3
    [2]GitHub:http://github.com/ZhongAnTech/zarm/discussions

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    返回列表 本版积分规则

    :
    中级会员
    :
    论坛短信
    :
    未填写
    :
    未填写
    :
    未填写

    主题38

    帖子47

    积分226

    图文推荐