ion-ripple-effect
コンテンツ
ripple effectコンポーネントは、 Material Design ink ripple interaction effect を追加します。このコンポーネントは <ion-app>
内でのみ利用することができ、どのコンポーネントにも追加できます。
重要なのは、親要素は 相対位置 であることです。なぜなら、波及効果は絶対位置で、相対位置で最も近い親要素をカバーすることになるからです。親要素には ion-activatable
クラスも指定します。これは波及効果に、その要素がクリック可能であることを伝えるものです。
デフォルトのタイプである "bounded"
は、クリック位置から外側に波紋を広げます。常に要素の中心から始まり、円形に広がる波紋効果を追加するには、 "unbounded"
タイプを追加します。特にunbounded rippleでは、波紋がコンテナからはみ出さないように、親要素に overflow: hidden
を追加することが推奨されます。
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<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;
}
<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;
}
import React from 'react';
import { IonApp, IonContent, IonRippleEffect } from '@ionic/react';
import './RippleEffectExample.css';
export const RippleExample: React.FC = () => (
<IonApp>
<IonContent>
<div className="ion-activatable ripple-parent">
A plain div with a bounded ripple effect
<IonRippleEffect></IonRippleEffect>
</div>
<button className="ion-activatable ripple-parent">
A button with a bounded ripple effect
<IonRippleEffect></IonRippleEffect>
</button>
<div className="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect>
</div>
<button className="ion-activatable ripple-parent">
A button with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect>
</button>
</IonContent>
</IonApp>
);
.ripple-parent {
position: relative;
overflow: hidden;
}
import { Component, h } from '@stencil/core';
@Component({
tag: 'ripple-effect-example',
styleUrl: 'ripple-effect-example.css'
})
export class RippleEffectExample {
render() {
return [
<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;
}
<template>
<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>
</template>
<style>
.ripple-parent {
position: relative;
overflow: hidden;
}
</style>
<script>
import { IonApp, IonContent, IonRippleEffect } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonApp, IonContent, IonRippleEffect }
});
</script>
プロパティ
type
Description | Sets 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. |
Attribute | type |
Type | "bounded" | "unbounded" |
Default | 'bounded' |
イベント
No events available for this component.
メソッド
addRipple
Description | Adds the ripple effect to the parent element. |
Signature | addRipple(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.