メインコンテンツまでスキップ
Version: v6

ion-ripple-effect

shadow

コンテンツ

ripple effectコンポーネントは、 Material Design ink ripple interaction effect を追加します。このコンポーネントは <ion-app> 内でのみ利用することができ、どのコンポーネントにも追加できます。

重要なのは、親要素は 相対位置 であることです。なぜなら、波及効果は絶対位置で、相対位置で最も近い親要素をカバーすることになるからです。親要素には ion-activatable クラスも指定します。これは波及効果に、その要素がクリック可能であることを伝えるものです。

デフォルトのタイプである "bounded" は、クリック位置から外側に波紋を広げます。常に要素の中心から始まり、円形に広がる波紋効果を追加するには、 "unbounded" タイプを追加します。特にunbounded rippleでは、波紋がコンテナからはみ出さないように、親要素に overflow: hidden を追加することが推奨されます。

使い方

<ion-app>
<ion-content>
<div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>

<button class="ion-activatable ripple-parent">
A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</button>

<div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div>

<button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button>
</ion-content>
</ion-app>
.ripple-parent {
position: relative;
overflow: hidden;
}

プロパティ

type

DescriptionSets the type of ripple-effect:

- bounded: the ripple effect expands from the user's click position - unbounded: the ripple effect expands from the center of the button and overflows the container.

NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
Attributetype
Type"bounded" | "unbounded"
Default'bounded'

イベント

No events available for this component.

メソッド

addRipple

DescriptionAdds the ripple effect to the parent element.
SignatureaddRipple(x: number, y: number) => Promise<() => void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.