Skip to content

Commit 6e152ca

Browse files
mmalerbammalerba
committed
fix remaining demos and examples
1 parent 2c7a5d4 commit 6e152ca

File tree

9 files changed

+136
-104
lines changed

9 files changed

+136
-104
lines changed

‎src/demo-app/a11y/select/select-a11y.html‎

Lines changed: 59 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,89 @@
22
<h2>Single selection</h2>
33
<p>Select your favorite color</p>
44

5-
<md-select placeholder="Colors" [(ngModel)]="selectedColor">
6-
<md-option *ngFor="let color of colors" [value]="color.value">
7-
{{ color.label }}
8-
</md-option>
9-
</md-select>
5+
<md-form-field>
6+
<md-select placeholder="Colors" [(ngModel)]="selectedColor">
7+
<md-option *ngFor="let color of colors" [value]="color.value">
8+
{{ color.label }}
9+
</md-option>
10+
</md-select>
11+
</md-form-field>
1012
</section>
1113

1214
<section>
1315
<h2>Multiple selection</h2>
1416
<p>Pick toppings for your pizza</p>
1517

16-
<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
17-
<md-option *ngFor="let topping of toppings" [value]="topping.value">
18-
{{ topping.label }}
19-
</md-option>
20-
</md-select>
18+
<md-form-field>
19+
<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
20+
<md-option *ngFor="let topping of toppings" [value]="topping.value">
21+
{{ topping.label }}
22+
</md-option>
23+
</md-select>
24+
</md-form-field>
2125
</section>
2226

2327
<section>
2428
<h2>Grouped options</h2>
2529
<p>Pick your Pokemon</p>
2630

27-
<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
28-
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
29-
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
30-
{{ creature.label }}
31-
</md-option>
32-
</md-optgroup>
33-
</md-select>
31+
<md-form-field>
32+
<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
33+
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
34+
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
35+
{{ creature.label }}
36+
</md-option>
37+
</md-optgroup>
38+
</md-select>
39+
</md-form-field>
3440
</section>
3541

3642
<section>
3743
<h2>Colors</h2>
3844

3945
<div class="select-a11y-spacer">
40-
<md-select placeholder="ZIP code" color="primary">
41-
<md-option value="2000">2000</md-option>
42-
<md-option value="2100">2100</md-option>
43-
</md-select>
46+
<md-form-field color="primary">
47+
<md-select placeholder="ZIP code">
48+
<md-option value="2000">2000</md-option>
49+
<md-option value="2100">2100</md-option>
50+
</md-select>
51+
</md-form-field>
4452

45-
<md-select placeholder="State" color="accent">
46-
<md-option value="alaska">Alaska</md-option>
47-
<md-option value="alabama">Alabama</md-option>
48-
</md-select>
53+
<md-form-field color="accent">
54+
<md-select placeholder="State">
55+
<md-option value="alaska">Alaska</md-option>
56+
<md-option value="alabama">Alabama</md-option>
57+
</md-select>
58+
</md-form-field>
4959

50-
<md-select placeholder="Language" color="warn">
51-
<md-option value="english">English</md-option>
52-
<md-option value="spanish">Spanish</md-option>
53-
</md-select>
60+
<md-form-field color="warn">
61+
<md-select placeholder="Language">
62+
<md-option value="english">English</md-option>
63+
<md-option value="spanish">Spanish</md-option>
64+
</md-select>
65+
</md-form-field>
5466
</div>
5567

5668
<div class="select-a11y-spacer">
57-
<md-select placeholder="Digimon" color="primary" multiple>
58-
<md-option value="mihiramon">Mihiramon</md-option>
59-
<md-option value="sandiramon">Sandiramon</md-option>
60-
</md-select>
69+
<md-form-field color="primary">
70+
<md-select placeholder="Digimon" multiple>
71+
<md-option value="mihiramon">Mihiramon</md-option>
72+
<md-option value="sandiramon">Sandiramon</md-option>
73+
</md-select>
74+
</md-form-field>
6175

62-
<md-select placeholder="Drink" color="accent" multiple>
63-
<md-option value="water">Water</md-option>
64-
<md-option value="coke">Coke</md-option>
65-
</md-select>
76+
<md-form-field color="accent">
77+
<md-select placeholder="Drink" multiple>
78+
<md-option value="water">Water</md-option>
79+
<md-option value="coke">Coke</md-option>
80+
</md-select>
81+
</md-form-field>
6682

67-
<md-select placeholder="Theme" color="warn" multiple>
68-
<md-option value="light">Light</md-option>
69-
<md-option value="dark">Dark</md-option>
70-
</md-select>
83+
<md-form-field color="warn">
84+
<md-select placeholder="Theme" multiple>
85+
<md-option value="light">Light</md-option>
86+
<md-option value="dark">Dark</md-option>
87+
</md-select>
88+
</md-form-field>
7189
</div>
7290
</section>

‎src/demo-app/dialog/dialog-demo.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,13 @@ <h2>Dialog backdrop</h2>
5656
<h2>Other options</h2>
5757

5858
<p>
59-
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
60-
<md-option>Start</md-option>
61-
<md-option value="end">End</md-option>
62-
<md-option value="center">Center</md-option>
63-
</md-select>
59+
<md-form-field>
60+
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
61+
<md-option>Start</md-option>
62+
<md-option value="end">End</md-option>
63+
<md-option value="center">Center</md-option>
64+
</md-select>
65+
</md-form-field>
6466
</p>
6567

6668
<p>

‎src/lib/paginator/paginator.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
{{_intl.itemsPerPageLabel}}
44
</div>
55

6-
<md-select *ngIf="_displayedPageSizeOptions.length > 1"
7-
class="mat-paginator-page-size-select"
8-
[value]="pageSize"
9-
[aria-label]="_intl.itemsPerPageLabel"
10-
(change)="_changePageSize($event.value)">
11-
<md-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
12-
{{pageSizeOption}}
13-
</md-option>
14-
</md-select>
6+
<md-form-field *ngIf="_displayedPageSizeOptions.length > 1">
7+
<md-select class="mat-paginator-page-size-select"
8+
[value]="pageSize"
9+
[aria-label]="_intl.itemsPerPageLabel"
10+
(change)="_changePageSize($event.value)">
11+
<md-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
12+
{{pageSizeOption}}
13+
</md-option>
14+
</md-select>
15+
</md-form-field>
1516

1617
<div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
1718
</div>

‎src/lib/select/select.md‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
`<md-select>` is a form control for selecting a value from a set of options, similar to the native
22
`<select>` element. You can read more about selects in the
3-
[Material Design spec](https://material.google.com/components/menus.html).
3+
[Material Design spec](https://material.google.com/components/menus.html). It is designed to work
4+
inside of an `<md-form-field>` element.
45

56
<!-- example(select-overview) -->
67

@@ -12,9 +13,11 @@ binding to it.
1213

1314
*my-comp.html*
1415
```html
15-
<md-select placeholder="State">
16-
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
17-
</md-select>
16+
<md-form-field>
17+
<md-select placeholder="State">
18+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
19+
</md-select>
20+
</md-form-field>
1821
```
1922

2023
### Getting and setting the select value
@@ -24,9 +27,11 @@ any of the form directives from the core `FormsModule` or `ReactiveFormsModule`:
2427

2528
*my-comp.html*
2629
```html
27-
<md-select placeholder="State" [(ngModel)]="myState">
28-
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
29-
</md-select>
30+
<md-form-field>
31+
<md-select placeholder="State" [(ngModel)]="myState">
32+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
33+
</md-select>
34+
</md-form-field>
3035
```
3136

3237
*my-comp.ts*
@@ -43,10 +48,12 @@ If you want one of your options to reset the select's value, you can omit specif
4348

4449
*my-comp.html*
4550
```html
46-
<md-select placeholder="State">
47-
<md-option>None</md-option>
48-
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
49-
</md-select>
51+
<md-form-field>
52+
<md-select placeholder="State">
53+
<md-option>None</md-option>
54+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
55+
</md-select>
56+
</md-form-field>
5057
```
5158

5259
### Setting a static placeholder
@@ -57,9 +64,11 @@ It's possible to turn off the placeholder's floating animation using the `floatP
5764
- `'always'`: This makes the placeholder permanently float above the input. It will not animate up or down.
5865

5966
```html
60-
<md-select placeholder="State" [(ngModel)]="myState" floatPlaceholder="never">
61-
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
62-
</md-select>
67+
<md-form-field floatPlaceholder="never">
68+
<md-select placeholder="State" [(ngModel)]="myState">
69+
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
70+
</md-select>
71+
</md-form-field>
6372
```
6473

6574
Global default placeholder options can be specified by setting the `MD_PLACEHOLDER_GLOBAL_OPTIONS` provider. This setting will apply to all components that support the floating placeholder.
@@ -76,10 +85,12 @@ Global default placeholder options can be specified by setting the `MD_PLACEHOLD
7685
If you want to display a custom trigger label inside a select, you can use the `md-select-trigger` element:
7786

7887
```html
79-
<md-select placeholder="Favorite food" #select="mdSelect">
80-
<md-select-trigger>You have selected: {{ select.selected?.viewValue }}</md-select-trigger>
81-
<md-option *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</md-option>
82-
</md-select>
88+
<md-form-field>
89+
<md-select placeholder="Favorite food" #select="mdSelect">
90+
<md-select-trigger>You have selected: {{ select.selected?.viewValue }}</md-select-trigger>
91+
<md-option *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</md-option>
92+
</md-select>
93+
</md-form-field>
8394
```
8495

8596
Here are the available global options:

‎src/lib/select/select.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,6 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
6666
}
6767
}
6868

69-
.mat-select-measure-font-size {
70-
position: absolute;
71-
display: block;
72-
height: 1em;
73-
visibility: hidden;
74-
pointer-events: none;
75-
}
76-
7769
// Override optgroup and option to scale based on font-size of the trigger.
7870
.mat-select-panel {
7971
.mat-optgroup-label,

‎src/material-examples/select-form/select-form-example.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<form>
2-
<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
3-
<md-option *ngFor="let food of foods" [value]="food.value">
4-
{{food.viewValue}}
5-
</md-option>
6-
</md-select>
2+
<md-form-field>
3+
<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
4+
<md-option *ngFor="let food of foods" [value]="food.value">
5+
{{food.viewValue}}
6+
</md-option>
7+
</md-select>
8+
</md-form-field>
79

810
<p> Selected value: {{selectedValue}} </p>
911
</form>

‎src/material-examples/select-overview/select-overview-example.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<md-select placeholder="Favorite food">
2-
<md-option *ngFor="let food of foods" [value]="food.value">
3-
{{ food.viewValue }}
4-
</md-option>
5-
</md-select>
1+
<md-form-field>
2+
<md-select placeholder="Favorite food">
3+
<md-option *ngFor="let food of foods" [value]="food.value">
4+
{{ food.viewValue }}
5+
</md-option>
6+
</md-select>
7+
</md-form-field>

‎src/material-examples/tooltip-position/tooltip-position-example.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<div class="example-tooltip-host" mdTooltip="Tooltip!" [mdTooltipPosition]="position">
22
<span>Show tooltip</span>
3-
<md-select class="example-select" [(ngModel)]="position">
4-
<md-option value="before">Before</md-option>
5-
<md-option value="after">After</md-option>
6-
<md-option value="above">Above</md-option>
7-
<md-option value="below">Below</md-option>
8-
<md-option value="left">Left</md-option>
9-
<md-option value="right">Right</md-option>
10-
</md-select>
3+
<md-form-field>
4+
<md-select class="example-select" [(ngModel)]="position">
5+
<md-option value="before">Before</md-option>
6+
<md-option value="after">After</md-option>
7+
<md-option value="above">Above</md-option>
8+
<md-option value="below">Below</md-option>
9+
<md-option value="left">Left</md-option>
10+
<md-option value="right">Right</md-option>
11+
</md-select>
12+
</md-form-field>
1113
</div>

‎src/universal-app/kitchen-sink/kitchen-sink.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,13 @@ <h3>Standalone radios</h3>
159159
<md-radio-button name="onions" disabled>Red</md-radio-button>
160160

161161
<h2>Select</h2>
162-
<md-select value="ceramic">
163-
<md-option value="glass">Glass</md-option>
164-
<md-option value="ceramic">Ceramic</md-option>
165-
<md-option value="steel">Steel</md-option>
166-
</md-select>
162+
<md-form-field>
163+
<md-select value="ceramic">
164+
<md-option value="glass">Glass</md-option>
165+
<md-option value="ceramic">Ceramic</md-option>
166+
<md-option value="steel">Steel</md-option>
167+
</md-select>
168+
</md-form-field>
167169

168170
<h2>Sidenav</h2>
169171
<md-sidenav-container>

0 commit comments

Comments
 (0)