Semi Design 是现代、全面、灵活的设计系统和 UI 库,由字节跳动抖音前端与 UED 团队设计、开发并维护,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。
Semi Design v2.97.0 已发布,此版本带来如下更新内容:
-
【Feature】
- Cascader 组件新增
remote属性,支持远程搜索功能#2956#3232
- ConfigProvider 组件新增
responsiveMapprop,支持自定义响应式断点配置#1335#3253
- ConfigProvider 组件新增
responsiveObserveprop,支持全局响应式断点监听(默认关闭,按需开启)#1335#3253
- ConfigConsumer 新增
onBreakpoint方法,支持订阅断点变化#1335#3253
- ConfigConsumer 新增
screens属性,提供当前断点匹配状态#1335#3253
- Form 组件统一校验函数命名为
validator。Field 新增validatorprop(替代validate),Form 新增validatorprop(替代validateFields),旧属性名保留但标记 deprecated#2933#3233
- Image 和 ImagePreview 组件新增
initialZoom属性,支持设置预览图片初始缩放比例#1368#3255
- Image 和 ImagePreview 组件新增
maxZoom属性,支持设置预览图片最大缩放比例#1368#3255
- Image 和 ImagePreview 组件新增
minZoom属性,支持设置预览图片最小缩放比例#1368#3255
- Tag 组件新增 SplitTagGroup 子组件,支持将多个标签组合成连续的视觉整体#2891#3234
- Switch 组件新增
$color-switch_knob-bg-checkedCSS 变量,支持独立控制开关按钮在开启和关闭状态下的背景颜色#2635#3236
- Table 组件新增
headerStyleprop,支持统一设置所有表头单元格样式(包括 fixed 列)#2347#3246
- TagInput 组件支持标签溢出时自动换行显示#2715#3237
- TextArea 组件新增
resize属性,支持用户通过拖动调整文本域尺寸。当autosize启用时,resize将被强制设为'none'。水平方向 resize 时,组件边框和附属元素会跟随文本域宽度自适应#2441#3243
- TimePicker 组件新增
disabledTimeprop,支持在 range 模式下对左右面板分别应用不同的禁用规则#1443#3252
- Transfer 组件新增
virtualizeprop,支持右侧已选择面板的虚拟化渲染,解决大数据量场景下的性能问题#2586#3240
- Upload 组件新增
cropprop,支持图片上传前裁切,可配置裁切框比例、形状等参数#2889#3256
- Upload 组件新增
beforeCropprop,支持裁切前拦截#2889#3256
- Upload 组件新增
onCropErrorprop,支持裁切失败回调#2889#3256
- Upload 组件新增
cropModalPropsprop,支持自定义裁切弹窗#2889#3256
-
【Fix】
- 修复 DatePicker 组件 compact 模式下长月份名称导致面板宽度溢出的问题#2487#3244
- 修复 Form 组件 Field 在使用 rules 校验且 message 为空字符串时无法触发 onSubmit/onSubmitFail 的问题#2340#3245
- 修复 JsonViewer 组件在
options.autoWrap为true时,容器尺寸变化后内容显示不正确的问题#2837#3239
- 修复 JsonViewer 组件多行替换/插入操作时光标位置计算不正确的问题#2908#3231
- 修复 Navigation 组件 Footer 内折叠按钮颜色 token 不生效的问题,确保按钮图标使用 Navigation 定义的颜色变量而非 Button 的默认颜色#1841#3250
- 修复 Select 组件通过 showClear 清空后,blur 失焦触发校验失效的问题#1453#3254
- 修复 Spin 组件在 Next.js SSR 环境下因 ID 生成方式导致的 hydration mismatch 错误#2114#3249
- 修复 Table 组件在 virtualized 模式下,使用 JSX children 方式定义 columns 时,快速切换数据源触发无限更新循环的问题#2592#3241
- 修复 Table 组件在设置了 sorter 的列上,onHeaderCell 的 onClick 回调在点击 title 部分时不触发的问题#1861#3248
- 修复 Tabs 组件在 scroll 模式下新增或删除 tab 时折叠按钮出现闪烁的问题#2145#3247
- 修复 Toast 组件手动关闭时导致 content 副作用重复执行的问题#1483#3251
-
【Documentation】
- Tabs 组件新增拖拽排序使用示例,展示如何使用 renderTabBar API 配合 @dnd-kit 实现标签页拖拽排序#2687#3238
详情可查看:https://semi.design/zh-CN/ecosystem/changelog