diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 7559ddf3891e..3b2c41a91f7e 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -74,24 +74,24 @@

Icons

Divider Colors

Input

- + - + - +

Textarea

- + - + - +
@@ -128,7 +128,7 @@

Textarea

Hello  - + , how are you? @@ -177,9 +177,9 @@

Textarea

- Check to change the divider color: - - + Check to change the color: + +

diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index e8fb5838141c..58135ee8fbb2 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -12,7 +12,7 @@ let max = 5; }) export class InputDemo { floatingLabel: string = 'auto'; - dividerColor: boolean; + color: boolean; requiredField: boolean; ctrlDisabled = false; diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index cefe5a06f8d1..324cc9378714 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -13,8 +13,8 @@ [attr.for]="_mdInputChild.id" [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat" [class.mat-float]="_canPlaceholderFloat" - [class.mat-accent]="dividerColor == 'accent'" - [class.mat-warn]="dividerColor == 'warn'" + [class.mat-accent]="color == 'accent'" + [class.mat-warn]="color == 'warn'" *ngIf="_hasPlaceholder()"> {{_mdInputChild.placeholder}} @@ -32,8 +32,8 @@

+ [class.mat-accent]="color == 'accent'" + [class.mat-warn]="color == 'warn'">
{{hintLabel}}
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index bbc7c0a15b91..7361314c3fb0 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -255,7 +255,12 @@ export class MdInputContainer implements AfterContentInit { @Input() align: 'start' | 'end' = 'start'; /** Color of the input divider, based on the theme. */ - @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary'; + @Input() color: 'primary' | 'accent' | 'warn' = 'primary'; + + /** @deprecated Use color instead. */ + @Input() + get dividerColor() { return this.color; } + set dividerColor(value) { this.color = value; } /** Whether the floating label should always float or not. */ get _shouldAlwaysFloat() { return this._floatPlaceholder === 'always'; }; diff --git a/src/lib/input/input.md b/src/lib/input/input.md index 9e17b3baf7bb..e30161462396 100644 --- a/src/lib/input/input.md +++ b/src/lib/input/input.md @@ -66,9 +66,9 @@ Hint labels are specified in one of two ways: either using the `hintLabel` attri `align` attribute containing the side. The attribute version is assumed to be at the `start`. Specifying a side twice will result in an exception during initialization. -### Divider Color +### Underline Color -The divider (line under the `input` content) color can be changed by using the `dividerColor` +The underline (line under the `input` content) color can be changed by using the `color` attribute of `md-input-container`. A value of `primary` is the default and will correspond to the theme primary color. Alternatively, `accent` or `warn` can be specified to use the theme's accent or warn color.