diff --git a/src/lib/input/README.md b/src/lib/input/README.md index 639f82decac..5d0787efe35 100644 --- a/src/lib/input/README.md +++ b/src/lib/input/README.md @@ -1,155 +1,183 @@ -# mdInput / mdTextarea +**NOTE: The md-input element is deprecated. md-input-container should be +used instead.** -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). +# md-input-container +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). `md-input-container` acts as +a wrapper for native `input` and `textarea` elements. The native element wrapped by the +`md-input-container` must be marked with the `md-input` directive. - -## Notes -* The `` / `` component fully support two-way binding of `ngModel`, as if it was a normal `` and ` + +``` + +## Usage + +### `input` and `textarea` attributes + +All of the attributes that can be used with normal `input` and `textarea` elements can be used on +elements within the `md-input-container` as well. This includes angular specific ones such as +`ngModel` and `formControl`. + +The only limitations are that the `type` attribute can only be one of the values supported by +`md-input-container` and the native element cannot specify a `placeholder` attribute if the +`md-input-container` also contains a `md-placeholder` element. + +#### Supported `input` types + +The following [input types](http://www.w3schools.com/TAGs/att_input_type.asp) can be used with +`md-input-container`: +* date +* datetime-local +* email +* month +* number +* password +* search +* tel +* text +* time +* url +* week + +### Placeholder + +A placeholder is an indicative text displayed in the input zone when the input does not contain +text. When text is present, the indicative text will float above this input zone. + +You can set the `floatingPlaceholder` attribute of `md-input-container` to `false` to hide the +indicative text instead when text is present in the input. + +You can specify a placeholder for the input in one of two ways; either using the `placeholder` +attribute on the `input` or `textarea`, or using an `md-placeholder` element in the +`md-input-container`. Using both will raise an error. + +### 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: + +```html + + + $  + .00 + +``` +### Hint Labels +Hint labels are the labels that show below the underline. You can have up to two hint labels; one on +the `start` of the line (left in an LTR language, right in RTL), and one on the `end`. -## Hint Labels - -Hint labels are the labels that shows the underline. You can have up to two hint labels; one on the `start` of the line (left in an LTR language, right in RTL), or one on the `end`. - -You specify a hint-label in one of two ways; either using the `hintLabel` attribute, or using an `` directive in the ``, which takes an `align` attribute containing the side. The attribute version is assumed to be at the `start`. - +You specify a hint label in one of two ways; either using the `hintLabel` attribute of +`md-input-container`, or using an `md-hint` element inside the `md-input-container`, which takes an +`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. -#### Example - -A simple character counter can be made like the following: - +For example, a simple character counter can be made like the following: ```html - - {{characterCountHintExample.characterCount}} / 100 - + + + {{characterCountHintExample.value.length}} / 100 + ``` +### Divider Color +The divider (line under the `input` content) color can be changed by using the `dividerColor` +attribute of `md-input-container`. A value of `primary` is the default and will correspond to your +theme primary color. Alternatively, you can specify `accent` or `warn`. -## 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 note that this example has been doctored to show the colors; they would normally show only on focus)^) +```html + + + + + + + + + +``` +_please note that this image has been doctored to show each `input` as if it were focused:_ +### Full Forms - -## Labelling - -You can label the `` as you would a regular ``. - -## Focus - -You can put the focus on an input component using the `focus()` method. - -### Example +You can make a full form using inputs, and they will support autofill natively. ```html - +
+ + + + + + + +
+ + + +
+ +

+ + + + + + +

+ + + + + +
+ + + + + + {{postalCode.value.length}} / 5 +
+
``` -```ts -export class MyComponent implements AfterViewInit { - @ViewChild('nameInput') nameInput: MdInput; - - ngAfterViewInit() { - this.nameInput.focus(); - } -} -``` - -## Textareas - -```html - -``` - -### Example - -## 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: - + +## API Summary + +### Inputs + +| Name | Type | Description | +| --- | --- | --- | +| `align` | `"start" | "end"` | The alignment of the `input` or `textarea`. Default = `"start"`. | +| `dividerColor` | `"primary" | "accent" | "warn"` | The color of the placeholder and underline. Default = `"primary"`. | +| `floatingPlaceholder` | boolean | Whether the placeholder should float above the input after text is entered. Default = `true`. | +| `hintLabel` | string | The hint text to show on the start end of the `md-input-container`. | diff --git a/src/lib/sidenav/README.md b/src/lib/sidenav/README.md index 3e7982ca70c..2d0fc4c6dd2 100644 --- a/src/lib/sidenav/README.md +++ b/src/lib/sidenav/README.md @@ -1,3 +1,7 @@ +**NOTE: The md-sidenav-layout element is deprecated. md-sidenav-container +should be used instead.** + + # MdSidenav MdSidenav is the side navigation component for Material 2. It is composed of two components: `` and ``. diff --git a/src/lib/slider/README.md b/src/lib/slider/README.md index 98690caeeb5..87e422e9039 100644 --- a/src/lib/slider/README.md +++ b/src/lib/slider/README.md @@ -132,7 +132,7 @@ right-to-left languages. | `max` | number | Optional, the maximum number for the slider. Default = `100`. | | `step` | number | Optional, declares where the thumb will snap to. Default = `1`. | | `value` | number | Optional, the value to start the slider at. | -| `tick-interval` | `"auto" | number` | Optional, how many steps between tick marks. | +| `tick-interval` | `"auto"` \| number | Optional, how many steps between tick marks. | | `invert` | boolean | Optional, whether to invert the axis the thumb moves along. | | `vertical` | boolean | Optional, whether the slider should be oriented vertically. | | `disabled` | boolean | Optional, whether or not the slider is disabled. Default = `false`. |