diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index e706b5c2940f..e1691a3d9955 100644 --- a/src/lib/checkbox/checkbox.html +++ b/src/lib/checkbox/checkbox.html @@ -18,7 +18,10 @@
+ [matRippleRadius]="_rippleConfig.radius" + [matRippleSpeedFactor]="_rippleConfig.speedFactor" + [matRippleCentered]="_rippleConfig.centered"> +
+ [matRippleCentered]="_rippleConfig.centered" + [matRippleRadius]="_rippleConfig.radius" + [matRippleSpeedFactor]="_rippleConfig.speedFactor"> + + [matRippleDisabled]="disableRipple || disabled" + [matRippleCentered]="_rippleConfig.centered" + [matRippleRadius]="_rippleConfig.radius" + [matRippleSpeedFactor]="_rippleConfig.speedFactor"> diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index 8fd0e11da000..80b714f95b89 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -160,7 +160,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius; height: $mat-slide-toggle-ripple-radius * 2; width: $mat-slide-toggle-ripple-radius * 2; - border-radius: 50%; z-index: 1; pointer-events: none; } diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 7d0110bbde97..df5c5e3167eb 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -38,6 +38,7 @@ import { mixinDisabled, mixinDisableRipple, mixinTabIndex, + RippleConfig, RippleRef, } from '@angular/material/core'; @@ -139,6 +140,9 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro /** Reference to the ripple directive on the thumb container. */ @ViewChild(MatRipple) _ripple: MatRipple; + /** Ripple configuration for the mouse ripples and focus indicators. */ + _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5}; + constructor(elementRef: ElementRef, renderer: Renderer2, private _platform: Platform, @@ -232,7 +236,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro private _onInputFocusChange(focusOrigin: FocusOrigin) { if (!this._focusRipple && focusOrigin === 'keyboard') { // For keyboard focus show a persistent ripple as focus indicator. - this._focusRipple = this._ripple.launch(0, 0, {persistent: true, centered: true}); + this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig}); } else if (!focusOrigin) { this.onTouched();