组件/AutoSizer 自适应尺寸
通用组件

AutoSizer 自适应尺寸

用于让容器在内容变化时自动跟随宽/高,并带过渡动画。

该页面由 AI 迁移生成,请谨慎使用

内容已迁移完成,但仍建议结合源码和人工评审结果使用。

AutoSizer 自适应尺寸

用于让容器在内容变化时自动跟随宽/高,并带过渡动画。

典型场景:

  • Tabs 切换内容时外层高度平滑过渡
  • Button 在 loading 状态切换时宽度平滑过渡

实现基于 ResizeObserver。当内容中包含图片/异步渲染导致尺寸再次变化时,会自动触发重新测量。

基础用法

仅高度(推荐用于 Tabs/Accordion)

AutoSizer height

交互预览已暂停。

宽度跟随(在 flex 容器内)

当 AutoSizer 处于 flex item 且父容器把它 flex: 1 或者 width: 100% 撑满时,看起来就像“没跟随内容”。

AutoSizer width in flex

交互预览已暂停。

下拉内容高度跟随(用于筛选/搜索)

AutoSizer height for dropdown

交互预览已暂停。

弹框内容高度跟随(模拟)

AutoSizer height for dialog

交互预览已暂停。

仅宽度(推荐用于 Button 内容变化)

AutoSizer width

交互预览已暂停。

数字过渡 + 宽度跟随(NumberFlow)

AutoSizer + NumberFlow

交互预览已暂停。

文本丝滑变换 + 宽度跟随(TextTransformer)

该示例同时开启 width + height 跟随,并在外层设置 overflow-hidden,用于裁剪 blur 的边缘溢出。

AutoSizer + TextTransformer

交互预览已暂停。

API

Props

属性名类型默认值说明
asstringdivouter 渲染标签
innerAsstringdivinner 渲染标签
widthbooleantrue是否同步宽度
heightbooleantrue是否同步高度
inlineboolean-是否使用 shrink-to-content(默认仅在 width=true && height=false 时启用)
durationMsnumber200过渡时长(ms)
easingstringease过渡曲线
outerClassstringoverflow-hiddenouter class
innerClassstring-inner class
rounding'none' | 'round' | 'floor' | 'ceil'ceil测量值取整策略
immediatebooleantruemount 后是否立即测量
rafBatchbooleantrue是否使用 rAF 合并测量

Expose

名称类型说明
refresh()() => Promise<void>手动触发重新测量
flip(action)(action: () => void | Promise<void>) => Promise<void>以 action 触发一次尺寸过渡(适合 Tabs 切换/明确动作)
action(fn, options?)(fn: (el: HTMLElement) => void | Promise<void>, options?: AutoSizerActionOptions | detect) => Promise<any>执行一次“事务动作”,内部自动前后快照检测并触发过渡(推荐用于 demo/复杂切换)
sizeRef<{ width: number; height: number } | null>最新测量结果