diff --git a/src/components/input/README.md b/src/components/input/README.md index a3faa9067bc..6e3ab7ac461 100644 --- a/src/components/input/README.md +++ b/src/components/input/README.md @@ -2,7 +2,10 @@ Inputs are the basic input component of Material 2. The spec can be found [here](https://www.google.com/design/spec/components/text-fields.html). -### Screenshots + + +## Notes +* The `` component fully support two-way binding of `ngModel`, as if it was a normal ``. @@ -12,22 +15,27 @@ At the time of writing this README, the `[type]` attribute is copied to the actu The valid `type` attribute values are any supported by your browser, with the exception of `file`, `checkbox` and `radio`. File inputs aren't supported for now, while check boxes and radio buttons have their own components. + + ## Prefix and Suffix You can include HTML before, and after the input tag, as prefix or suffix. It will be underlined as per the Material specification, and clicking it will focus the input. To add a prefix, use the `md-prefix` attribute on the element. Similarly, to add a suffix, use the `md-suffix` attribute. For example, in a template: +#### Example + ```html - - $ + + $  .00 ``` Will result in this: -!!!! INSERT SCREENSHOT HERE. + + ## Hint Labels @@ -38,5 +46,76 @@ You specify a hint-label in one of two ways; either using the `hintLabel` attrib Specifying a side twice will result in an exception during initialization. +#### Example + +A simple character counter can be made like the following: + +```html + + {{characterCountHintExample.characterCount}} / 100 + +``` + + + + + ## Divider Color +The divider (line under the content) color can be changed by using the `dividerColor` attribute. A value of `primary` is the default and will correspond to your theme primary color. Alternatively, you can specify `accent` or `warn`. + +#### Example + +^((please not that this example has been doctored to show the colors; they would normally show only on focus)^) + + + + + +## Labelling + +You can label the `` as you would a regular ``. + + + +## Full Forms + +You can make a full form using inputs, and it will support autofill natively. + +#### Example + +```html + + Basic + +
+ + + + + + +
+

+ + +

+ + + + +
+ {{postalCode.characterCount}} / 5 +
+
+ + +``` + +Will result in this: + + diff --git a/src/components/input/input.html b/src/components/input/input.html index 82d460776be..3a45fd18cac 100644 --- a/src/components/input/input.html +++ b/src/components/input/input.html @@ -2,35 +2,38 @@
- +
+ - + +
@@ -39,7 +42,8 @@ [class.md-disabled]="disabled"> + [class.md-accent]="dividerColor == 'accent'" + [class.md-warn]="dividerColor == 'warn'">
{{hintLabel}}
diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 433e0883de1..10a6453d936 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -11,6 +11,7 @@ $md-input-required-placeholder-color: md-color($md-accent); // Underline colors. $md-input-underline-color: md-color($md-foreground, hint-text); $md-input-underline-color-accent: md-color($md-accent); +$md-input-underline-color-warn: md-color($md-warn); $md-input-underline-disabled-color: md-color($md-foreground, hint-text); $md-input-underline-focused-color: md-color($md-primary); @@ -18,11 +19,29 @@ $md-input-underline-focused-color: md-color($md-primary); $md-input-underline-disabled-background-image: linear-gradient(to right, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%); + +/** + * Applies a floating placeholder above the input itself. + */ +%md-input-placeholder-floating { + visibility: visible; + padding-bottom: 5px; + transform: translateY(-100%) scale(0.75); + + .md-placeholder-required { + color: $md-input-required-placeholder-color; + } +} + + :host { display: inline-block; position: relative; font-family: $md-font-family; + // To avoid problems with text-align. + text-align: left; + // Global wrapper. We need to apply margin to the element for spacing, but // cannot apply it to the host element directly. .md-input-wrapper { @@ -61,18 +80,32 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, } } + .md-input-infix { + position: relative; + } + // The placeholder label. This is invisible unless it is. The logic to show it is // basically `empty || (float && (!empty || focused))`. Float is dependent on the // `floatingPlaceholder` input. .md-input-placeholder { + // The placeholder is after the , but needs to be aligned top-left of the + // infix
. position: absolute; + left: 0; + top: 0; + visibility: hidden; font-size: 100%; pointer-events: none; // We shouldn't catch mouse events (let them through). color: $md-input-placeholder-color; z-index: 1; + // Put ellipsis text overflow. width: 100%; + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; transform: translateY(0); transform-origin: bottom left; @@ -87,13 +120,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, // Show the placeholder above the input when it's not empty, or focused. &.md-float:not(.md-empty), &.md-float.md-focused { - visibility: visible; - padding-bottom: 5px; - transform: translateY(-100%) scale(0.75); - - .md-placeholder-required { - color: $md-input-required-placeholder-color; - } + @extend %md-input-placeholder-floating; } // :focus is applied to the input, but we apply md-focused to the other elements @@ -104,9 +131,21 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, &.md-accent { color: $md-input-underline-color-accent; } + &.md-warn { + color: $md-input-underline-color-warn; + } } } + // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to + // the floating position. This is necessary because these browsers do not actually + // fire any events when a form auto-fill is occurring. + // Once the autofill is committed, a change event happen and the regular md-input + // classes take over to fulfill this behaviour. + input:-webkit-autofill + .md-input-placeholder { + @extend %md-input-placeholder-floating; + } + // The underline is what's shown under the input, its prefix and its suffix. // The ripple is the blue animation coming on top of it. .md-input-underline { @@ -140,6 +179,9 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, &.md-accent { background-color: $md-input-underline-color-accent; } + &.md-warn { + background-color: $md-input-underline-color-warn; + } &.md-focused { opacity: 1; @@ -164,6 +206,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, // RTL support. :host-context([dir="rtl"]) { + text-align: right; + .md-input-placeholder { transform-origin: bottom right; } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 025999e46c5..9076f08e62c 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -131,7 +131,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange */ @Input() @OneOf(['start', 'end']) align: string = 'start'; @Input() @BooleanFieldValue() disabled: boolean = false; - @Input() @OneOf(['primary', 'accent']) dividerColor: string = 'primary'; + @Input() @OneOf(['primary', 'accent', 'warn']) dividerColor: string = 'primary'; @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true; @Input() hintLabel: string = ''; @Input() id: string = `md-input-${nextUniqueId++}`; diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 6508b0223ea..0c466a9e722 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -1,3 +1,63 @@ + + Basic + +
+ + + + + + +
+

+ + +

+ + + + +
+ {{postalCode.characterCount}} / 5 +
+
+ + + + + Prefix + Suffix + + + $  + .00 + + + + + + Divider Colors + + + + + + + + + Hints + +

+ + {{characterCountHintExample.characterCount}} / 100 + +

+ + + Hello , diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss index fd4d46b40cf..e28f5c1c93f 100644 --- a/src/demo-app/input/input-demo.scss +++ b/src/demo-app/input/input-demo.scss @@ -1,6 +1,15 @@ @import 'default-theme'; @import 'variables'; +.demo-basic { + padding: 0; +} +.demo-basic md-card-content { + padding: 16px; +} +.demo-full-width { + width: 100%; +} .demo-icons { font-size: 100%; diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index d66095c6a25..65370b74764 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -3,6 +3,7 @@ import {MD_INPUT_DIRECTIVES} from '../../components/input/input'; import {MdButton} from '../../components/button/button'; import {MdCard} from '../../components/card/card'; import {MdCheckbox} from '../../components/checkbox/checkbox'; +import {MdToolbar} from '../../components/toolbar/toolbar'; let max = 5; @@ -11,7 +12,7 @@ let max = 5; selector: 'input-demo', templateUrl: 'demo-app/input/input-demo.html', styleUrls: ['demo-app/input/input-demo.css'], - directives: [MdCard, MdCheckbox, MdButton, MD_INPUT_DIRECTIVES] + directives: [MdCard, MdCheckbox, MdButton, MdToolbar, MD_INPUT_DIRECTIVES] }) export class InputDemo { dividerColor: boolean;