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

fix(fab-button): improve ripple effect behavior on click (#25413)

Browse Source 
resolves #21772
This commit is contained in:
Liam DeBeasi
2022-06-08 13:28:20 -04:00
committed by GitHub
parent 72580a22e9
commit efdaf90c5a
3 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/fab-button/fab-button.tsx
View File

@ -22,6 +22,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
shadow: true,
})
export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
private fab: HTMLIonFabElement | null = null;
@Element() el!: HTMLElement;
/**
@ -119,6 +121,10 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
*/
@Event() ionBlur!: EventEmitter<void>;
connectedCallback() {
this.fab = this.el.closest('ion-fab');
}
private onFocus = () => {
this.ionFocus.emit();
};
@ -127,6 +133,15 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
this.ionBlur.emit();
};
private onClick = () => {
const { fab } = this;
if (!fab) {
return;
}
fab.toggle();
};
render() {
const { el, disabled, color, href, activated, show, translucent, size } = this;
const inList = hostContext('ion-fab-list', el);
@ -144,6 +159,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
return (
<Host
onClick={this.onClick}
aria-disabled={disabled ? 'true' : null}
class={createColorClasses(color, {
[mode]: true,