/
fab-list.tsx
50 lines (40 loc) · 1.13 KB
/
fab-list.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core';
import { Mode } from '../../interface';
@Component({
tag: 'ion-fab-list',
styleUrl: 'fab-list.scss',
shadow: true
})
export class FabList implements ComponentInterface {
mode!: Mode;
@Element() el!: HTMLIonFabElement;
/**
* If `true`, the fab list will be show all fab buttons in the list.
*/
@Prop() activated = false;
@Watch('activated')
protected activatedChanged(activated: boolean) {
const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
// if showing the fabs add a timeout, else show immediately
const timeout = activated ? 30 : 0;
fabs.forEach((fab, i) => {
setTimeout(() => fab.show = activated, i * timeout);
});
}
/**
* The side the fab list will show on relative to the main fab button.
*/
@Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
hostData() {
return {
class: {
[`${this.mode}`]: true,
'fab-list-active': this.activated,
[`fab-list-side-${this.side}`]: true
}
};
}
render() {
return <slot></slot>;
}
}