-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(select): add md-select-header directive
Adds a `md-select-header` component, which is a fixed header above the select's options. It allows for the user to project an input to be used for filtering long lists of options. **Note:** This component only handles the positioning, styling and exposes the panel id for a11y. The functionality is up to the user to handle. Fixes #2812.
- Loading branch information
Showing
14 changed files
with
253 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/** No CSS for this example */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<md-select placeholder="Favorite food" [(ngModel)]="currentDrink" name="food" #select="mdSelect"> | ||
<md-select-header> | ||
<input type="search" [(ngModel)]="searchString" role="combobox" [attr.aria-owns]="select.panelId" | ||
(ngModelChange)="filterFoods()" placeholder="Search for food"/> | ||
</md-select-header> | ||
|
||
<md-option *ngFor="let food of foods" [value]="food.value"> | ||
{{food.viewValue}} | ||
</md-option> | ||
</md-select> | ||
|
||
<p> Selected value: {{selectedValue}} </p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
|
||
@Component({ | ||
selector: 'select-form-example', | ||
templateUrl: './select-form-example.html', | ||
}) | ||
export class SelectHeaderExample { | ||
selectedValue: string; | ||
searchString: string; | ||
|
||
initialFoods = [ | ||
{ value: 'steak-0', viewValue: 'Steak' }, | ||
{ value: 'pizza-1', viewValue: 'Pizza' }, | ||
{ value: 'tacos-2', viewValue: 'Tacos' }, | ||
{ value: 'sandwich-3', viewValue: 'Sandwich' }, | ||
{ value: 'chips-4', viewValue: 'Chips' }, | ||
{ value: 'eggs-5', viewValue: 'Eggs' }, | ||
{ value: 'pasta-6', viewValue: 'Pasta' }, | ||
{ value: 'sushi-7', viewValue: 'Sushi' }, | ||
]; | ||
|
||
foods = this.initialFoods.slice(); | ||
|
||
filterFoods() { | ||
this.foods = this.searchString ? this.initialFoods.filter(item => { | ||
return item.viewValue.toLowerCase().indexOf(this.searchString.toLowerCase()) > -1; | ||
}) : this.initialFoods.slice(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -54,4 +54,8 @@ | |
color: mat-color($foreground, hint-text); | ||
} | ||
} | ||
|
||
.mat-select-header { | ||
color: mat-color($foreground, divider); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import {Directive} from '@angular/core'; | ||
|
||
|
||
/** | ||
* Fixed header that will be rendered above a select's options. | ||
*/ | ||
@Directive({ | ||
selector: 'md-select-header, mat-select-header', | ||
host: { | ||
'class': 'mat-select-header', | ||
} | ||
}) | ||
export class MdSelectHeader { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.