diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
index a6e2229a7a29..e978c9b58fd3 100644
--- a/src/lib/radio/_radio-theme.scss
+++ b/src/lib/radio/_radio-theme.scss
@@ -29,8 +29,7 @@
}
}
- // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
- .md-radio-focused .md-ink-ripple {
+ .md-radio-focused .md-radio-ripple .md-ripple-foreground {
background-color: md-color($accent, 0.26);
}
}
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index aa0c80a4657f..f6ff6f3e15d5 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -5,7 +5,11 @@
{
expect(radioInstances.every(radio => !radio.checked)).toBe(true);
});
+
+ it('should remove ripple if md-ripple-disabled input is set', async(() => {
+ fixture.detectChanges();
+ for (let radioNativeElement of radioNativeElements)
+ {
+ expect(radioNativeElement.querySelectorAll('[md-ripple]').length)
+ .toBe(1, 'Expect [md-ripple] in radio buttons');
+ }
+
+ testComponent.disableRipple = true;
+ fixture.detectChanges();
+ for (let radioNativeElement of radioNativeElements)
+ {
+ expect(radioNativeElement.querySelectorAll('[md-ripple]').length)
+ .toBe(0, 'Expect no [md-ripple] in radio buttons');
+ }
+ }));
});
describe('group with ngModel', () => {
@@ -437,9 +454,9 @@ describe('MdRadio', () => {
[align]="alignment"
[value]="groupValue"
name="test-name">
- Charmander
- Squirtle
- Bulbasaur
+ Charmander
+ Squirtle
+ Bulbasaur
`
})
@@ -447,6 +464,7 @@ class RadiosInsideRadioGroup {
alignment: string;
isGroupDisabled: boolean = false;
groupValue: string = null;
+ disableRipple: boolean = false;
}
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index 20d43c5f6671..60a7e387026d 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -3,6 +3,7 @@ import {
Component,
ContentChildren,
Directive,
+ ElementRef,
EventEmitter,
HostBinding,
Input,
@@ -15,11 +16,13 @@ import {
NgModule,
ModuleWithProviders,
} from '@angular/core';
+import {CommonModule} from '@angular/common';
import {
NG_VALUE_ACCESSOR,
ControlValueAccessor
} from '@angular/forms';
-import {MdUniqueSelectionDispatcher} from '../core';
+import {MdRippleModule, MdUniqueSelectionDispatcher} from '../core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
@@ -263,14 +266,22 @@ export class MdRadioButton implements OnInit {
/** Value assigned to this radio.*/
private _value: any = null;
+ /** Whether the ripple effect on click should be disabled. */
+ private _disableRipple: boolean;
+
/** The parent radio group. May or may not be present. */
radioGroup: MdRadioGroup;
+ @Input()
+ get disableRipple(): boolean { return this._disableRipple; }
+ set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+
/** Event emitted when the group value changes. */
@Output()
change: EventEmitter = new EventEmitter();
constructor(@Optional() radioGroup: MdRadioGroup,
+ private _elementRef: ElementRef,
public radioDispatcher: MdUniqueSelectionDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -411,10 +422,15 @@ export class MdRadioButton implements OnInit {
this.radioGroup._touch();
}
}
+
+ getHostElement() {
+ return this._elementRef.nativeElement;
+ }
}
@NgModule({
+ imports: [CommonModule, MdRippleModule],
exports: [MdRadioGroup, MdRadioButton],
declarations: [MdRadioGroup, MdRadioButton],
})