Skip to content

Commit 4bbc0de

Browse files
committed
docs(select): add basic readme and update overview
Closes #2148
1 parent 026c70a commit 4bbc0de

File tree

2 files changed

+105
-7
lines changed

2 files changed

+105
-7
lines changed

src/lib/select/OVERVIEW.md

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,41 @@
11
`<md-select>` is a form control for selecting a value from a set of options, similar to the native
2-
`<select>` element.
2+
`<select>` element. You can read more about selects in the
3+
[Material Design spec](https://material.google.com/components/menus.html).
34

4-
<!-- example(select-overview) -->
5+
### Simple select
56

6-
### Use with `@angular/forms`
7-
`<md-select>` is compatible with `@angular/forms` and supports both `FormsModule`
8-
and `ReactiveFormsModule`.
7+
In your template, create an `md-select` element. For each option you'd like in your select, add an
8+
`md-option` tag. Note that you can disable items by adding the `disabled` boolean attribute or
9+
binding to it.
10+
11+
*my-comp.html*
12+
```html
13+
<md-select placeholder="State">
14+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
15+
</md-select>
16+
```
17+
18+
### Getting and setting the select value
19+
20+
The select component is set up as a custom value accessor, so you can manipulate the select's value using
21+
any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`, `formControl`, etc.
22+
23+
*my-comp.html*
24+
```html
25+
<md-select placeholder="State" [(ngModel)]="myState">
26+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
27+
</md-select>
28+
```
29+
30+
*my-comp.ts*
31+
```ts
32+
class MyComp {
33+
myState = 'AZ';
34+
states = [{code: 'AL', name: 'Alabama'}...];
35+
}
36+
```
37+
38+
#### Keyboard interaction:
39+
- <kbd>DOWN_ARROW</kbd>: Focus next option
40+
- <kbd>UP_ARROW</kbd>: Focus previous option
41+
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item

src/lib/select/README.md

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,68 @@
1-
## Work in progress!
1+
# md-select
22

3-
The select is still a work in progress, so most features have not been implemented. Not ready for use!
3+
`<md-select>` is a form control for selecting a value from a set of options, similar to the native
4+
`<select>` element. You can read more about selects in the
5+
[Material Design spec](https://material.google.com/components/menus.html).
6+
7+
### Not yet implemented
8+
9+
- Multi-select support
10+
- Option groups
11+
- Select headers
12+
13+
## Usage
14+
15+
### Simple select
16+
17+
In your template, create an `md-select` element. For each option you'd like in your select, add an
18+
`md-option` tag. The value property of each option dictates the value that will be set in the select's
19+
form control when that option is selected. What is between the `md-option` tags is what will be
20+
visibly displayed in the list. Note that you can disable items by adding the `disabled` boolean
21+
attribute or binding to it.
22+
23+
*my-comp.html*
24+
```html
25+
<md-select placeholder="State">
26+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
27+
</md-select>
28+
```
29+
30+
Output:
31+
32+
<img src="https://material.angularjs.org/material2_assets/select/basic-select-closed.png">
33+
<img src="https://material.angularjs.org/material2_assets/select/basic-select-open.png">
34+
35+
### Getting and setting the select value
36+
37+
The select component is set up as a custom value accessor, so you can manipulate the select's value using
38+
any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`, `formControl`, etc.
39+
40+
*my-comp.html*
41+
```html
42+
<md-select placeholder="State" [(ngModel)]="myState">
43+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
44+
</md-select>
45+
```
46+
47+
*my-comp.ts*
48+
```ts
49+
class MyComp {
50+
myState = 'AZ';
51+
states = [{code: 'AL', name: 'Alabama'}...];
52+
}
53+
```
54+
55+
Output:
56+
57+
<img src="https://material.angularjs.org/material2_assets/select/value-select-closed.png">
58+
<img src="https://material.angularjs.org/material2_assets/select/value-select-open.png">
59+
60+
### Accessibility
61+
62+
The select adds role="listbox" to the main select element and role="option" to each option. It also adds the "aria-owns", "aria-disabled",
63+
"aria-label", "aria-required", and "aria-invalid" attributes as appropriate to the select.
64+
65+
#### Keyboard events:
66+
- <kbd>DOWN_ARROW</kbd>: Focus next option
67+
- <kbd>UP_ARROW</kbd>: Focus previous option
68+
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item

0 commit comments

Comments
 (0)