javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): update method and parameter descriptions (#18075)

Browse Source
This commit is contained in:
Brandy Carney
2019-04-23 12:59:25 -04:00
committed by GitHub
parent bd96491d03
commit 464ec3b70a
56 changed files with 879 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/ripple-effect/readme.md
View File

@ -33,16 +33,16 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
## Methods
### `addRipple(pageX: number, pageY: number) => Promise<() => void>`
### `addRipple(x: number, y: number) => Promise<() => void>`
Adds the ripple effect to the parent element
Adds the ripple effect to the parent element.
#### Parameters
| Name | Type | Description |
| ------- | -------- | ----------- |
| `pageX` | `number` | |
| `pageY` | `number` | |
| Name | Type | Description |
| ---- | -------- | ----------------------------------------------------------- |
| `x` | `number` | The horizontal coordinate of where the ripple should start. |
| `y` | `number` | The vertical coordinate of where the ripple should start. |
#### Returns

19
core/src/components/ripple-effect/ripple-effect.tsx
View File

@ -27,10 +27,13 @@ export class RippleEffect implements ComponentInterface {
@Prop() type: 'bounded' | 'unbounded' = 'bounded';
/**
* Adds the ripple effect to the parent element
* Adds the ripple effect to the parent element.
*
* @param x The horizontal coordinate of where the ripple should start.
* @param y The vertical coordinate of where the ripple should start.
*/
@Method()
async addRipple(pageX: number, pageY: number) {
async addRipple(x: number, y: number) {
return new Promise<() => void>(resolve => {
this.queue.read(() => {
const rect = this.el.getBoundingClientRect();
@ -41,14 +44,14 @@ export class RippleEffect implements ComponentInterface {
const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
const finalScale = maxRadius / initialSize;
let posX = pageX - rect.left;
let posY = pageY - rect.top;
let posX = x - rect.left;
let posY = y - rect.top;
if (this.unbounded) {
posX = width * 0.5;
posY = height * 0.5;
}
const x = posX - initialSize * 0.5;
const y = posY - initialSize * 0.5;
const styleX = posX - initialSize * 0.5;
const styleY = posY - initialSize * 0.5;
const moveX = width * 0.5 - posX;
const moveY = height * 0.5 - posY;
@ -56,8 +59,8 @@ export class RippleEffect implements ComponentInterface {
const div = this.win.document.createElement('div');
div.classList.add('ripple-effect');
const style = div.style;
style.top = y + 'px';
style.left = x + 'px';
style.top = styleY + 'px';
style.left = styleX + 'px';
style.width = style.height = initialSize + 'px';
style.setProperty('--final-scale', `${finalScale}`);
style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);