Skip to content

Commit 444a1f6

Browse files
mmalerbajelbourn
authored andcommitted
docs(input): add overview file (#2307)
1 parent 965cd7a commit 444a1f6

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

src/lib/input/OVERVIEW.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# md-input-container
2+
3+
Inputs are the basic input component of Material 2. The spec can be found
4+
[here](https://www.google.com/design/spec/components/text-fields.html). `md-input-container` acts as
5+
a wrapper for native `input` and `textarea` elements that is used to add material design styles and
6+
behavior. The native element wrapped by the `md-input-container` must be marked with the `md-input`
7+
directive.
8+
9+
<!-- example(input-overview) -->
10+
11+
## Usage
12+
13+
### `input` and `textarea` attributes
14+
15+
All of the attributes that can be used with normal `input` and `textarea` elements can be used on
16+
elements within the `md-input-container` as well. This includes angular specific ones such as
17+
`ngModel` and `formControl`.
18+
19+
The only limitations are that the `type` attribute can only be one of the values supported by
20+
`md-input-container` and the native element cannot specify a `placeholder` attribute if the
21+
`md-input-container` also contains a `md-placeholder` element.
22+
23+
#### Supported `input` types
24+
25+
The following [input types](http://www.w3schools.com/TAGs/att_input_type.asp) can be used with
26+
`md-input-container`:
27+
* date
28+
* datetime-local
29+
* email
30+
* month
31+
* number
32+
* password
33+
* search
34+
* tel
35+
* text
36+
* time
37+
* url
38+
* week
39+
40+
### Placeholder
41+
42+
A placeholder is an indicative text displayed in the input zone when the input does not contain
43+
text. When text is present, the indicative text will float above this input zone.
44+
45+
The `floatingPlaceholder` attribute of `md-input-container` can be set to `false` to hide the
46+
indicative text instead when text is present in the input.
47+
48+
A placeholder for the input can be specified in one of two ways: either using the `placeholder`
49+
attribute on the `input` or `textarea`, or using an `md-placeholder` element in the
50+
`md-input-container`. Using both will raise an error.
51+
52+
### Prefix and Suffix
53+
54+
HTML can be included before, and after the input tag, as prefix or suffix. It will be underlined as
55+
per the Material specification, and clicking it will focus the input.
56+
57+
Adding the `md-prefix` attribute to an element inside the `md-input-container` will designate it as
58+
the prefix. Similarly, adding `md-suffix` will designate it as the suffix.
59+
60+
### Hint Labels
61+
62+
Hint labels are the labels that show below the underline. An `md-input-container` can have up to two
63+
hint labels; one on the `start` of the line (left in an LTR language, right in RTL), and one on the
64+
`end`.
65+
66+
Hint labels are specified in one of two ways: either using the `hintLabel` attribute of
67+
`md-input-container`, or using an `md-hint` element inside the `md-input-container`, which takes an
68+
`align` attribute containing the side. The attribute version is assumed to be at the `start`.
69+
Specifying a side twice will result in an exception during initialization.
70+
71+
### Divider Color
72+
73+
The divider (line under the `input` content) color can be changed by using the `dividerColor`
74+
attribute of `md-input-container`. A value of `primary` is the default and will correspond to the
75+
theme primary color. Alternatively, `accent` or `warn` can be specified to use the theme's accent or
76+
warn color.

0 commit comments

Comments
 (0)