ResizeTooltip 在元素宽度或高度发生变化时显示该元素的尺寸。

用法

const Example = () => {
    return (
        <div style={ { position: 'relative' } }>
            <ResizeTooltip />
            ...
        </div>
    );
};

请确保包含 <ResizeTooltip /> 的父元素已定义 position 样式属性。这一点非常重要，因为 <ResizeTooltip /> 使用基于 position 的技术来确定尺寸变化。

位置

<ResizeTooltip /> 有三种位置；

  • bottom（默认值）
  • corner

bottom

bottom 位置（默认值）将尺寸标签渲染在（父）元素的底部居中位置。

corner

corner 位置将尺寸标签渲染在（父）元素的右上角。

Props

axis

限制标签仅根据指定的轴进行渲染。默认情况下，标签会根据 x 和 y 的变化自动渲染。

  • 类型：String
  • 是否必需：否
  • 可选值：x | y

fadeTimeout

调整大小事件后，标签消失前的持续时间（以 ms 为单位）。

  • 类型：Number
  • 是否必需：否
  • 默认值：180

isVisible

确定是否允许渲染标签。

  • 类型：Boolean
  • 是否必需：否
  • 默认值：true

labelRef

标签元素的回调 Ref。

  • 类型：Function
  • 是否必需：否

onMove

当（被观察的）元素调整大小时调用的回调函数，具体为基于 mousemove 的事件。

  • 类型：Function
  • 是否必需：否

onResize

当（被观察的）元素调整大小时调用的回调函数。

  • 类型：Function
  • 是否必需：否

position

标签的位置。

  • 类型：String
  • 是否必需：否
  • 默认值：corner
  • 可选值：bottom | corner

showPx

在标签中的宽度或高度值后渲染 PX 单位后缀。

  • 类型：Boolean
  • 是否必需：否
  • 默认值：true

zIndex

标签的 z-index 样式属性。

  • 类型：Number
  • 是否必需：否
  • 默认值：1000