diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 11b41b405b1..2ca041402fb 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -18,6 +18,7 @@ import {InputAccessibilityDemo} from './input/input-a11y'; import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y'; import {SliderAccessibilityDemo} from './slider/slider-a11y'; import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; +import {SelectAccessibilityDemo} from './select/select-a11y'; @NgModule({ @@ -54,6 +55,7 @@ export class AccessibilityRoutingModule {} RadioAccessibilityDemo, SliderAccessibilityDemo, SnackBarAccessibilityDemo, + SelectAccessibilityDemo, ] }) export class AccessibilityDemoModule {} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index ecbb3596811..17e258e6282 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -30,5 +30,6 @@ export class AccessibilityDemo { {name: 'Radio buttons', route: 'radio'}, {name: 'Slider', route: 'slider'}, {name: 'Snack bar', route: 'snack-bar'}, + {name: 'Select', route: 'select'}, ]; } diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index a43ea23f624..871b9913245 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -13,6 +13,7 @@ import {InputAccessibilityDemo} from './input/input-a11y'; import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y'; import {SliderAccessibilityDemo} from './slider/slider-a11y'; import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; +import {SelectAccessibilityDemo} from './select/select-a11y'; export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: '', component: AccessibilityHome}, @@ -29,4 +30,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'radio', component: RadioAccessibilityDemo}, {path: 'slider', component: SliderAccessibilityDemo}, {path: 'snack-bar', component: SnackBarAccessibilityDemo}, + {path: 'select', component: SelectAccessibilityDemo}, ]; diff --git a/src/demo-app/a11y/select/select-a11y.html b/src/demo-app/a11y/select/select-a11y.html new file mode 100644 index 00000000000..26599933be1 --- /dev/null +++ b/src/demo-app/a11y/select/select-a11y.html @@ -0,0 +1,72 @@ +
+

Single selection

+

Select your favorite color

+ + + + {{ color.label }} + + +
+ +
+

Multiple selection

+

Pick toppings for your pizza

+ + + + {{ topping.label }} + + +
+ +
+

Grouped options

+

Pick your Pokemon

+ + + + + {{ creature.label }} + + + +
+ +
+

Colors

+ +
+ + 2000 + 2100 + + + + Alaska + Alabama + + + + English + Spanish + +
+ +
+ + Mihiramon + Sandiramon + + + + Water + Coke + + + + Light + Dark + +
+
diff --git a/src/demo-app/a11y/select/select-a11y.scss b/src/demo-app/a11y/select/select-a11y.scss new file mode 100644 index 00000000000..a47025104e5 --- /dev/null +++ b/src/demo-app/a11y/select/select-a11y.scss @@ -0,0 +1,3 @@ +.select-a11y-spacer { + margin-bottom: 10px; +} diff --git a/src/demo-app/a11y/select/select-a11y.ts b/src/demo-app/a11y/select/select-a11y.ts new file mode 100644 index 00000000000..21e4fd72744 --- /dev/null +++ b/src/demo-app/a11y/select/select-a11y.ts @@ -0,0 +1,72 @@ +import {Component} from '@angular/core'; + + +@Component({ + moduleId: module.id, + selector: 'select-a11y', + templateUrl: 'select-a11y.html', + styleUrls: ['select-a11y.css'], +}) +export class SelectAccessibilityDemo { + selectedColor: string; + selectedTopping: string[]; + selectedPokemon: string; + + colors = [ + {value: 'red', label: 'Red'}, + {value: 'green', label: 'Green'}, + {value: 'blue', label: 'Blue'}, + {value: 'cyan', label: 'Cyan'}, + {value: 'magenta', label: 'Magenta'}, + {value: 'yellow', label: 'Yellow'}, + {value: 'black', label: 'Black'}, + ]; + + toppings = [ + {value: 'pepperoni', label: 'Pepperoni'}, + {value: 'mushrooms', label: 'Mushrooms'}, + {value: 'onions', label: 'Onions'}, + {value: 'sausage', label: 'Sausage'}, + {value: 'bacon', label: 'Bacon'}, + {value: 'cheese', label: 'Cheese'}, + {value: 'olives', label: 'Olives'}, + {value: 'peppers', label: 'Peppers'}, + {value: 'pineapple', label: 'Pineapple'}, + {value: 'spinach', label: 'Spinach'}, + ]; + + pokemon = [ + { + label: 'Grass', + pokemon: [ + {value: 'bulbasaur', label: 'Bulbasaur'}, + {value: 'oddish', label: 'Oddish'}, + {value: 'bellsprout', label: 'Bellsprout'} + ] + }, + { + label: 'Water', + pokemon: [ + {value: 'squirtle', label: 'Squirtle'}, + {value: 'psyduck', label: 'Psyduck'}, + {value: 'horsea', label: 'Horsea'} + ] + }, + { + label: 'Fire', + disabled: true, + pokemon: [ + {value: 'charmander', label: 'Charmander'}, + {value: 'vulpix', label: 'Vulpix'}, + {value: 'flareon', label: 'Flareon'} + ] + }, + { + label: 'Psychic', + pokemon: [ + {value: 'mew', label: 'Mew'}, + {value: 'mewtwo', label: 'Mewtwo'} + ] + } + ]; +}