Ripple 涟漪

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

按住这块面板

<script setup lang="ts">
  import { Card, Center, Ripple, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="hn-interactive relative isolate w-full max-w-sm cursor-pointer overflow-hidden">
    <Ripple />
    <Center class="h-20">
      <Text size="sm" tone="muted">按住这块面板</Text>
    </Center>
  </Card>
</template>

vue

用法

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

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

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

可按压

disabled，无涟漪

<script setup lang="ts">
  import { Card, Center, Inline, Ripple, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch" class="w-full">
    <Card class="hn-interactive relative isolate flex-1 cursor-pointer overflow-hidden">
      <Ripple />
      <Center class="h-20">
        <Text size="sm" tone="muted">可按压</Text>
      </Center>
    </Card>

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

vue

行为

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

API

Props

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

用法

行为

无障碍

API

Props