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

feat(ripple): adds unbounded ripple-effect (#16399)

Browse Source
This commit is contained in:
Manu MA
2018-11-20 23:37:54 +01:00
committed by GitHub
parent 4dd4ccc4ce
commit 2884076834
12 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
shadow: true,
})
export class Button implements ComponentInterface {
private inToolbar = false;
@Element() el!: HTMLElement;
@Prop({ context: 'window' }) win!: Window;
@ -97,9 +100,7 @@ export class Button implements ComponentInterface {
@Event() ionBlur!: EventEmitter<void>;
componentWillLoad() {
if (this.fill === undefined) {
this.fill = this.el.closest('ion-buttons') ? 'clear' : 'solid';
}
this.inToolbar = !!this.el.closest('ion-buttons');
}
private onFocus = () => {
@ -139,8 +140,11 @@ export class Button implements ComponentInterface {
}
hostData() {
const { buttonType, keyFocus, disabled, color, expand, fill, shape, size, strong } = this;
const { buttonType, keyFocus, disabled, color, expand, shape, size, strong } = this;
let fill = this.fill;
if (fill === undefined) {
fill = this.inToolbar ? 'clear' : 'solid';
}
return {
'ion-activatable': true,
'aria-disabled': this.disabled ? 'true' : null,
@ -181,7 +185,7 @@ export class Button implements ComponentInterface {
<slot></slot>
<slot name="end"></slot>
</span>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
{this.mode === 'md' && <ion-ripple-effect type={this.inToolbar ? 'unbounded' : 'bounded'}></ion-ripple-effect>}
</TagType>
);
}