Ripple 涟漪

从按下位置扩散的涟漪反馈。

按住这块面板

import { Card, Center, Ripple, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="hn-interactive relative isolate w-full max-w-sm cursor-pointer overflow-hidden">
      <Ripple />
      <Center className="h-20">
        <Text size="sm" tone="muted">
          按住这块面板
        </Text>
      </Center>
    </Card>
  )
}

tsx

用法

import { Ripple } from '@hina-ui/react'

Ripple 放进需要按压反馈的元素内部，涟漪从手指或指针的落点扩散开。Button 一类的控件已经内置，只有自制的可按压区域才需要手动加。

宿主元素有三个要求：建立定位与层叠上下文（relative isolate）、裁切溢出（overflow-hidden），以及自身就是响应按压的那一层——组件把指针监听挂在父元素上。涟漪会继承宿主的圆角，不需要重复设置。

可按压

disabled，无涟漪

import { Card, Center, Inline, Ripple, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch" className="w-full">
      <Card className="hn-interactive relative isolate flex-1 cursor-pointer overflow-hidden">
        <Ripple />
        <Center className="h-20">
          <Text size="sm" tone="muted">
            可按压
          </Text>
        </Center>
      </Card>

      <Card className="relative isolate flex-1 overflow-hidden">
        <Ripple disabled />
        <Center className="h-20">
          <Text size="sm" tone="faint">
            disabled，无涟漪
          </Text>
        </Center>
      </Card>
    </Inline>
  )
}

tsx

行为

涟漪从落点开始扩散，尺寸按宿主对角线计算，因此大小面板都能铺满。
按下时间过短时仍会播完最短时长，避免快速点击只看到一闪。
触摸操作有一小段延迟才起效，用于区分点击与滑动，滑动时不出现涟漪。
指针在按下后移出宿主范围会取消，回到范围内可继续。
系统开启减弱动态效果时不播放扩散。
强制颜色模式下整体不渲染。

API

Props

属性	类型	默认值	说明
`disabled`	`boolean`	`false`	是否停用涟漪

用法

行为

无障碍

API

Props