diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 67ed60627621..79835975bcde 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -33,6 +33,12 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y'; import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y'; import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; import {SelectAccessibilityDemo} from './select/select-a11y'; +import { + TabsAccessibilityDemo, + SunnyTabContent, + RainyTabContent, + FoggyTabContent, +} from './tabs/tabs-a11y'; @NgModule({ @@ -81,6 +87,10 @@ export class AccessibilityRoutingModule {} SlideToggleAccessibilityDemo, SnackBarAccessibilityDemo, SelectAccessibilityDemo, + TabsAccessibilityDemo, + SunnyTabContent, + RainyTabContent, + FoggyTabContent, ], entryComponents: [ DialogAccessibilityDemo, @@ -89,6 +99,9 @@ export class AccessibilityRoutingModule {} DialogNeptuneExampleDialog, DialogNeptuneIFrameDialog, DialogWelcomeExampleDialog, + SunnyTabContent, + RainyTabContent, + FoggyTabContent, ] }) export class AccessibilityDemoModule {} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index 7a26c450a2ae..214d77fddbb9 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -38,6 +38,7 @@ export class AccessibilityDemo { {name: 'Slide toggle', route: 'slide-toggle'}, {name: 'Snack bar', route: 'snack-bar'}, {name: 'Select', route: 'select'}, + {name: 'Tabs', route: 'tabs'}, {name: 'Toolbar', route: 'toolbar'}, ]; diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index 7b011ad2e214..3220a0a8a0f3 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -20,6 +20,8 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y'; import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y'; import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; import {SelectAccessibilityDemo} from './select/select-a11y'; +import {TabsAccessibilityDemo} from './tabs/tabs-a11y'; +import {TABS_DEMO_ROUTES} from './tabs/routes'; export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: '', component: AccessibilityHome}, @@ -42,5 +44,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'slide-toggle', component: SlideToggleAccessibilityDemo}, {path: 'snack-bar', component: SnackBarAccessibilityDemo}, {path: 'select', component: SelectAccessibilityDemo}, + {path: 'tabs', component: TabsAccessibilityDemo, children: TABS_DEMO_ROUTES}, {path: 'toolbar', component: ToolbarAccessibilityDemo}, ]; diff --git a/src/demo-app/a11y/tabs/routes.ts b/src/demo-app/a11y/tabs/routes.ts new file mode 100644 index 000000000000..9071cf76be1a --- /dev/null +++ b/src/demo-app/a11y/tabs/routes.ts @@ -0,0 +1,10 @@ +import {Routes} from '@angular/router'; + +import {SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-a11y'; + +export const TABS_DEMO_ROUTES: Routes = [ + {path: '', redirectTo: 'sunny-tab', pathMatch: 'full'}, + {path: 'sunny-tab', component: SunnyTabContent}, + {path: 'rainy-tab', component: RainyTabContent}, + {path: 'foggy-tab', component: FoggyTabContent}, +]; diff --git a/src/demo-app/a11y/tabs/tabs-a11y.html b/src/demo-app/a11y/tabs/tabs-a11y.html new file mode 100644 index 000000000000..af66c3b2889e --- /dev/null +++ b/src/demo-app/a11y/tabs/tabs-a11y.html @@ -0,0 +1,63 @@ +
+

Weather

+

Switch tabs to navigate

+ + + +
+ +
+

Dog breeds

+

Dynamic height tabs

+ + + + {{tab.label}} +
+ {{tab.content}} +
+
+
+ The Labrador Retriever, also Labrador, is a type of retriever-gun dog. The Labrador is + one of the most popular breeds of dog in the United Kingdom and the United States. +
+
+ A favourite disability assistance breed in many countries, Labradors are frequently + trained to aid the blind, those who have autism, to act as a therapy dog and perform + screening and detection work for law enforcement and other official agencies. They are + prized as sporting and hunting dogs. +
+
+ A few kennels breeding their ancestors, the St. John's water dog, were in England. + At the same time, a combination of the sheep protection policy in Newfoundland and rabies + quarantine in the United Kingdom, led to the gradual demise of the St. John's water dog + in Canada. +
+
+ In the 1830s, the 10th Earl of Home and his nephews the 5th Duke of Buccleuch and Lord + John Scott, had imported progenitors of the breed from Newfoundland to Europe for + use as gundogs. Another early advocate of these Newfoundland dogs, or Labrador Retrievers + as they later became known, was the 2nd Earl of Malmesbury who bred them for their + expertise in waterfowling. + + During the 1880s, the 3rd Earl of Malmesbury, the 6th Duke of Buccleuch and the 12th Earl + of Home collaborated to develop and establish the modern Labrador breed. The dogs + Buccleuch Avon and Buccleuch Ned, given by Malmesbury to Buccleuch, were mated with + bitches carrying blood from those originally imported by the 5th Duke and the 10th Earl + of Home. The offspring are considered to be the ancestors of modern Labradors. +
+
+
+
+ + +
+ diff --git a/src/demo-app/a11y/tabs/tabs-a11y.scss b/src/demo-app/a11y/tabs/tabs-a11y.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/demo-app/a11y/tabs/tabs-a11y.ts b/src/demo-app/a11y/tabs/tabs-a11y.ts new file mode 100644 index 000000000000..6d6905ed1b7b --- /dev/null +++ b/src/demo-app/a11y/tabs/tabs-a11y.ts @@ -0,0 +1,65 @@ +import {Component} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'tabs-a11y', + templateUrl: 'tabs-a11y.html', + styleUrls: ['tabs-a11y.css'], +}) +export class TabsAccessibilityDemo { + // Nav bar demo + tabLinks = [ + {label: 'Sun', link: 'sunny-tab'}, + {label: 'Rain', link: 'rainy-tab'}, + {label: 'Fog', link: 'foggy-tab'}, + ]; + + // Standard tabs demo + tabs = [ + { + label: 'German Shepherd', + content: `The German Shepherd is a breed of medium to large-sized working dog that originated + in Germany. The breed's officially recognized name is German Shepherd Dog in the + English language. The breed is also known as the Alsatian in Britain and Ireland.` + }, { + label: 'Labrador Retriever', + extraContent: true, + content: `The Labrador Retriever, also Labrador, is a type of retriever-gun dog. The Labrador + is one of the most popular breeds of dog in the United Kingdom and the United States.` + }, { + label: 'Rottweiler', + disabled: true, + content: `The Rottweiler is a breed of domestic dog, regarded as medium-to-large or large. + The dogs were known in German as Rottweiler Metzgerhund, meaning Rottweil butchers' dogs, + because their main use was to ...` + }, { + label: 'Beagle', + content: `The Beagle is a breed of small hound, similar in appearance to the much larger + foxhound. The beagle is a scent hound, developed primarily for hunting hare.` + }, + ]; +} + + +@Component({ + moduleId: module.id, + selector: 'sunny-routed-content', + template: 'Having a lot of light from the sun.', +}) +export class SunnyTabContent {} + + +@Component({ + moduleId: module.id, + selector: 'rainy-routed-content', + template: 'A rainy period of time is one when it rains a lot', +}) +export class RainyTabContent {} + + +@Component({ + moduleId: module.id, + selector: 'foggy-routed-content', + template: 'If the weather is foggy, there is fog', +}) +export class FoggyTabContent {}