skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(select): update live examples to use labels (#15095)

Browse Source 
* Fixes a few examples that didn't have labels for the native select.
* Switches all of the examples to use the `mat-label`, instead of a `placeholder`.

Fixes #15022.
This commit is contained in:
Kristiyan Kostadinov
2019-02-20 02:13:01 +01:00
committed by Jeremy Elbourn
parent 8fc97acf4a
commit 4021929709
11 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/material-examples/select-disabled/select-disabled-example.html
+4 -2
View File
@@ -4,7 +4,8 @@
<h4>mat-select</h4>
<mat-form-field>
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-label>Choose an option</mat-label>
<mat-select [disabled]="disableSelect.value">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
@@ -13,7 +14,8 @@
<h4>native html select</h4>
<mat-form-field>
<select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-label>Choose an option</mat-label>
<select matNativeControl [disabled]="disableSelect.value">
<option value="" selected></option>
<option value="volvo">Volvo</option>
<option value="saab" disabled>Saab</option>
src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
+4 -2
View File
@@ -1,6 +1,7 @@
<h4>mat-select</h4>
<mat-form-field>
<mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
<mat-label>Choose one</mat-label>
<mat-select [formControl]="selected" [errorStateMatcher]="matcher">
<mat-option>Clear</mat-option>
<mat-option value="valid">Valid option</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
@@ -14,7 +15,8 @@
<h4>native html select</h4>
<mat-form-field class="demo-full-width">
<select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
<mat-label>Choose one</mat-label>
<select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
<option value=""></option>
<option value="valid" selected>Valid option</option>
<option value="invalid">Invalid option</option>
src/material-examples/select-form/select-form-example.html
+4 -2
View File
@@ -1,7 +1,8 @@
<form>
<h4>mat-select</h4>
<mat-form-field>
<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
<mat-label>Favorite food</mat-label>
<mat-select [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
@@ -10,7 +11,8 @@
<p> Selected food: {{selectedValue}} </p>
<h4>native html select</h4>
<mat-form-field>
<select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
<mat-label>Favorite car</mat-label>
<select matNativeControl [(ngModel)]="selectedCar" name="car">
<option value="" selected></option>
<option *ngFor="let car of cars" [value]="car.value">
{{car.viewValue}}
src/material-examples/select-hint-error/select-hint-error-example.html
+2 -1
View File
@@ -1,6 +1,7 @@
<h4>mat select</h4>
<mat-form-field>
<mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
<mat-label>Favorite animal</mat-label>
<mat-select [formControl]="animalControl" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let animal of animals" [value]="animal">
{{animal.name}}
src/material-examples/select-multiple/select-multiple-example.html
+2 -1
View File
@@ -1,5 +1,6 @@
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
src/material-examples/select-no-ripple/select-no-ripple-example.html
+2 -1
View File
@@ -1,5 +1,6 @@
<mat-form-field>
<mat-select placeholder="Select an option" disableRipple>
<mat-label>Select an option</mat-label>
<mat-select disableRipple>
<mat-option value="1">Option 1</mat-option>
<mat-option value="2">Option 2</mat-option>
<mat-option value="3">Option 3</mat-option>
src/material-examples/select-optgroup/select-optgroup-example.html
+3 -1
View File
@@ -1,6 +1,7 @@
<h4>mat-select</h4>
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-label>Pokemon</mat-label>
<mat-select [formControl]="pokemonControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
@@ -13,6 +14,7 @@
<h4>native html select</h4>
<mat-form-field>
<mat-label>Cars</mat-label>
<select matNativeControl>
<optgroup label="Swedish Cars">
<option value="volvo">volvo</option>
src/material-examples/select-overview/select-overview-example.html
+3 -1
View File
@@ -1,6 +1,7 @@
<h4>Basic mat-select</h4>
<mat-form-field>
<mat-select placeholder="Favorite food">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
@@ -9,6 +10,7 @@
<h4>Basic native select</h4>
<mat-form-field>
<mat-label>Cars</mat-label>
<select matNativeControl required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
src/material-examples/select-panel-class/select-panel-class-example.html
+2 -1
View File
@@ -1,5 +1,6 @@
<mat-form-field>
<mat-select placeholder="Panel color" [formControl]="panelColor"
<mat-label>Panel color</mat-label>
<mat-select [formControl]="panelColor"
panelClass="example-panel-{{panelColor.value}}">
<mat-option value="red">Red</mat-option>
<mat-option value="green">Green</mat-option>
src/material-examples/select-reset/select-reset-example.html
+2 -1
View File
@@ -1,6 +1,7 @@
<h4>mat-select</h4>
<mat-form-field>
<mat-select placeholder="State">
<mat-label>State</mat-label>
<mat-select>
<mat-option>None</mat-option>
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
</mat-select>
src/material-examples/select-value-binding/select-value-binding-example.html
+1
View File
@@ -1,4 +1,5 @@
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>