Skip to content

Commit 34a43f6

Browse files
authored
docs(material/chips): add mat-labels to examples (#21126)
- add `mat-label`s to dev-app demos as well - fix demo that doesn't have 100% width
1 parent c14d92c commit 34a43f6

File tree

3 files changed

+6
-1
lines changed

3 files changed

+6
-1
lines changed

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<mat-form-field class="example-chip-list">
2+
<mat-label>Favorite Fruits</mat-label>
23
<mat-chip-list #chipList aria-label="Fruit selection">
34
<mat-chip
45
*ngFor="let fruit of fruits"

src/components-examples/material/chips/chips-input/chips-input-example.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<mat-form-field class="example-chip-list">
2+
<mat-label>Favorite Fruits</mat-label>
23
<mat-chip-list #chipList aria-label="Fruit selection">
34
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
45
[removable]="removable" (removed)="remove(fruit)">

src/dev-app/chips/chips-demo.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ <h4>Form Field</h4>
9999
Set tabIndex to {{tabIndex === 0 ? -1 : 0}}
100100
</button>
101101
<mat-form-field class="demo-has-chip-list">
102+
<mat-label>Contributors</mat-label>
102103
<mat-chip-list [tabIndex]="tabIndex" #chipList1 [(ngModel)]="selectedPeople" required>
103104
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
104105
[removable]="removable" (removed)="remove(person)">
@@ -120,7 +121,8 @@ <h4>Form Field</h4>
120121
With <code>matChipInput</code> the input work with chip-list
121122
</p>
122123

123-
<mat-form-field>
124+
<mat-form-field class="demo-has-chip-list">
125+
<mat-label>Contributors</mat-label>
124126
<mat-chip-list [tabIndex]="tabIndex" #chipList2 [(ngModel)]="selectedPeople" required>
125127
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
126128
[removable]="removable" (removed)="remove(person)">
@@ -141,6 +143,7 @@ <h4>Form Field</h4>
141143

142144

143145
<mat-form-field class="demo-has-chip-list">
146+
<mat-label>Contributors</mat-label>
144147
<mat-chip-list #chipList3>
145148
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
146149
[removable]="removable" (removed)="remove(person)">

0 commit comments

Comments
 (0)