diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.html b/src/dev-app/mdc-radio/mdc-radio-demo.html index 623d6a71f798..841ddb1dd198 100644 --- a/src/dev-app/mdc-radio/mdc-radio-demo.html +++ b/src/dev-app/mdc-radio/mdc-radio-demo.html @@ -1,2 +1,6 @@ - -Not yet implemented. +

Basic Example

+
+ Option 1 + Option 2 + Option 3 +
diff --git a/src/material-experimental/mdc-radio/BUILD.bazel b/src/material-experimental/mdc-radio/BUILD.bazel index 8923b64d2c77..8f29ad25324c 100644 --- a/src/material-experimental/mdc-radio/BUILD.bazel +++ b/src/material-experimental/mdc-radio/BUILD.bazel @@ -28,6 +28,14 @@ sass_library( sass_binary( name = "radio_scss", src = "radio.scss", + include_paths = [ + "external/npm/node_modules", + ], + deps = [ + "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib", + "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib", + "//src/material/core:core_scss_lib", + ], ) ng_e2e_test_library( diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html index 9c75ddb6f477..f6d686ac9e50 100644 --- a/src/material-experimental/mdc-radio/radio.html +++ b/src/material-experimental/mdc-radio/radio.html @@ -1 +1,12 @@ - +
+
+ +
+
+
+
+
+ +
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index f61450904c9a..f295d529ca75 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -1 +1,7 @@ -// TODO: MDC core styles here. +@import '@material/radio/mixins'; +@import '@material/form-field/mixins'; +@import '../mdc-helpers/mdc-helpers'; + + +@include mdc-radio-without-ripple($query: $mat-base-styles-query); +@include mdc-form-field-core-styles($query: $mat-base-styles-query); diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts index cad810b21142..7f11085282e7 100644 --- a/src/material-experimental/mdc-radio/radio.ts +++ b/src/material-experimental/mdc-radio/radio.ts @@ -6,7 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {ChangeDetectionStrategy, Component, ViewEncapsulation, Input} from '@angular/core'; + +// Increasing integer for generating unique ids for radio components. +let nextUniqueId = 0; @Component({ moduleId: module.id, @@ -15,11 +18,21 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co styleUrls: ['radio.css'], host: { 'class': 'mat-mdc-radio', + '[attr.id]': 'id', }, exportAs: 'matRadio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatRadio { + + private _uniqueId: string = `mat-radio-${++nextUniqueId}`; + + /** The unique ID for the radio button. */ + @Input() id: string = this._uniqueId; + + /** ID of the native input element inside `` */ + get inputId(): string { return `${this.id || this._uniqueId}-input`; } + // TODO: set up MDC foundation class. }