Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit e78b410

Browse files
jelbournjelbourn
authored
Add missing examples, example titles, and ensure examples are destroyed (#49)
* Update generated overview docs * Add example titles * Add more examples
1 parent 3c424f5 commit e78b410

35 files changed

+537
-1074
lines changed

‎src/app/examples/chips-overview/chips-overview-example.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<md-chip-list>
2+
<md-chip>One fish</md-chip>
3+
<md-chip>Two fish</md-chip>
4+
<md-chip color="primary" selected="true">Primary fish</md-chip>
5+
<md-chip color="accent" selected="true">Accent fish</md-chip>
6+
</md-chip-list>

‎src/app/examples/chips-overview/chips-overview-example.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'chips-overview-example',
6+
templateUrl: './chips-overview-example.html',
7+
})
8+
export class ChipsOverviewExample {}

‎src/app/examples/chips-stacked/chips-stacked-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
md-chip {
2+
max-width: 200px;
3+
}

‎src/app/examples/chips-stacked/chips-stacked-example.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<md-chip-list class="md-chip-list-stacked">
2+
<md-chip *ngFor="let chipColor of availableColors"
3+
selected="true"
4+
color="{{chipColor.color}}">
5+
{{chipColor.name}}
6+
</md-chip>
7+
</md-chip-list>

‎src/app/examples/chips-stacked/chips-stacked-example.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'chips-stacked-example',
6+
templateUrl: './chips-stacked-example.html',
7+
styleUrls: ['./chips-stacked-example.css'],
8+
})
9+
export class ChipsStackedExample {
10+
color: string;
11+
12+
availableColors = [
13+
{ name: 'none', color: '' },
14+
{ name: 'Primary', color: 'primary' },
15+
{ name: 'Accent', color: 'accent' },
16+
{ name: 'Warn', color: 'warn' }
17+
];
18+
}

‎src/app/examples/example-module.ts

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -61,55 +61,85 @@ import {
6161
import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example';
6262
import {RadioOverviewExample} from './radio-overview/radio-overview-example';
6363
import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
64+
import {SelectOverviewExample} from './select-overview/select-overview-example';
65+
import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
66+
import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
67+
import {SelectFormExample} from './select-form/select-form-example';
6468

6569

70+
export interface LiveExample {
71+
title: string;
72+
component: any;
73+
}
74+
6675
/**
6776
* The list of example components.
6877
* Key is the example name which will be used in `material-docs-example="key"`.
6978
* Value is the component.
7079
*/
71-
7280
export const EXAMPLE_COMPONENTS = {
73-
'button-overview': ButtonOverviewExample,
74-
'button-types': ButtonTypesExample,
75-
'button-toggle-exclusive': ButtonToggleExclusiveExample,
76-
'button-toggle-overview': ButtonToggleOverviewExample,
77-
'card-fancy': CardFancyExample,
78-
'card-overview': CardOverviewExample,
79-
'checkbox-configurable': CheckboxConfigurableExample,
80-
'checkbox-overview': CheckboxOverviewExample,
81-
'dialog-overview': DialogOverviewExample,
82-
'dialog-result': DialogResultExample,
83-
'grid-list-dynamic': GridListDynamicExample,
84-
'grid-list-overview': GridListOverviewExample,
85-
'icon-overview': IconOverviewExample,
86-
'icon-svg': IconSvgExample,
87-
'input-form': InputFormExample,
88-
'input-overview': InputOverviewExample,
89-
'list-overview': ListOverviewExample,
90-
'list-sections': ListSectionsExample,
91-
'menu-icons': MenuIconsExample,
92-
'menu-overview': MenuOverviewExample,
93-
'progress-bar-configurable': ProgressBarConfigurableExample,
94-
'progress-bar-overview': ProgressBarOverviewExample,
95-
'progress-spinner-configurable': ProgressSpinnerConfigurableExample,
96-
'progress-spinner-overview': ProgressSpinnerOverviewExample,
97-
'radio-ngmodel': RadioNgModelExample,
98-
'radio-overview': RadioOverviewExample,
99-
'sidenav-fab': SidenavFabExample,
100-
'sidenav-overview': SidenavOverviewExample,
101-
'slider-configurable': SliderConfigurableExample,
102-
'slider-overview': SliderOverviewExample,
103-
'slide-toggle-configurable': SlideToggleConfigurableExample,
104-
'slide-toggle-overview': SlideToggleOverviewExample,
105-
'snack-bar-component': SnackBarComponentExample,
106-
'snack-bar-overview': SnackBarOverviewExample,
107-
'tabs-overview': TabsOverviewExample,
108-
'tabs-template-label': TabsTemplateLabelExample,
109-
'toolbar-multirow': ToolbarMultirowExample,
110-
'toolbar-overview': ToolbarOverviewExample,
111-
'tooltip-overview': TooltipOverviewExample,
112-
'tooltip-position': TooltipPositionExample,
81+
'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample},
82+
'button-types': {title: 'Button varieties', component: ButtonTypesExample},
83+
'button-toggle-exclusive': {
84+
title: 'Exclusive selection',
85+
component: ButtonToggleExclusiveExample
86+
},
87+
'button-toggle-overview': {title: 'Basic button-toggles', component: ButtonToggleOverviewExample},
88+
'chips-overview': {title: 'Basic chips', component: ChipsOverviewExample},
89+
'chips-stacked': {title: 'Stacked chips', component: ChipsStackedExample},
90+
'card-fancy': {title: 'Card with multiple sections', component: CardFancyExample},
91+
'card-overview': {title: 'Basic cards', component: CardOverviewExample},
92+
'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample},
93+
'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample},
94+
'dialog-overview': {title: 'Basic dialog', component: DialogOverviewExample},
95+
'dialog-result': {title: 'Dailog with a result', component: DialogResultExample},
96+
'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
97+
'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
98+
'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
99+
'icon-svg': {title: 'SVG icons', component: IconSvgExample},
100+
'input-form': {title: 'Inputs in a form', component: InputFormExample},
101+
'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
102+
'list-overview': {title: 'Basic list', component: ListOverviewExample},
103+
'list-sections': {title: 'List with sections', component: ListSectionsExample},
104+
'menu-icons': {title: 'Menu with icons', component: MenuIconsExample},
105+
'menu-overview': {title: 'Basic menu', component: MenuOverviewExample},
106+
'progress-bar-configurable': {
107+
title: 'Configurable progress-bar',
108+
component: ProgressBarConfigurableExample
109+
},
110+
'progress-bar-overview': {title: 'Basic progress-bar', component: ProgressBarOverviewExample},
111+
'progress-spinner-configurable': {
112+
title: 'Configurable progress-bar',
113+
component: ProgressSpinnerConfigurableExample
114+
},
115+
'progress-spinner-overview': {
116+
title: 'Basic progress-spinner',
117+
component: ProgressSpinnerOverviewExample
118+
},
119+
'radio-ngmodel': {title: 'Radios with ngModel', component: RadioNgModelExample},
120+
'radio-overview': {title: 'Basic radios', component: RadioOverviewExample},
121+
'select-overview': {title: 'Basic select', component: SelectOverviewExample},
122+
'select-form': {title: 'Select in a form', component: SelectFormExample},
123+
'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample},
124+
'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample},
125+
'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample},
126+
'slider-overview': {title: 'Basic slider', component: SliderOverviewExample},
127+
'slide-toggle-configurable': {
128+
title: 'Configurable slide-toggle',
129+
component: SlideToggleConfigurableExample
130+
},
131+
'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample},
132+
'snack-bar-component': {
133+
title: 'Snack-bar with a custom component',
134+
component: SnackBarComponentExample
135+
},
136+
'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
137+
'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
138+
'tabs-template-label': {title: 'Tabs with a label template', component: TabsTemplateLabelExample},
139+
'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample},
140+
'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample},
141+
'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample},
142+
'tooltip-position': {title: 'Tooltip with custom position', component: TooltipPositionExample},
113143
};
114144

115145
/**
@@ -123,6 +153,8 @@ export const EXAMPLE_LIST = [
123153
ButtonTypesExample,
124154
CardFancyExample,
125155
CardOverviewExample,
156+
ChipsOverviewExample,
157+
ChipsStackedExample,
126158
CheckboxConfigurableExample,
127159
CheckboxOverviewExample,
128160
DialogOverviewExample,
@@ -146,6 +178,8 @@ export const EXAMPLE_LIST = [
146178
RadioNgModelExample,
147179
RadioOverviewExample,
148180
SidenavFabExample,
181+
SelectOverviewExample,
182+
SelectFormExample,
149183
SidenavOverviewExample,
150184
SliderConfigurableExample,
151185
SliderOverviewExample,

‎src/app/examples/select-form/select-form-example.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<form>
2+
<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
3+
<md-option *ngFor="let food of foods" [value]="food.value">
4+
{{food.viewValue}}
5+
</md-option>
6+
</md-select>
7+
8+
<p> Selected value: {{selectedValue}} </p>
9+
</form>

‎src/app/examples/select-form/select-form-example.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'select-form-example',
6+
templateUrl: './select-form-example.html',
7+
})
8+
export class SelectFormExample {
9+
selectedValue: string;
10+
11+
foods = [
12+
{value: 'steak-0', viewValue: 'Steak'},
13+
{value: 'pizza-1', viewValue: 'Pizza'},
14+
{value: 'tacos-2', viewValue: 'Tacos'}
15+
];
16+
}

‎src/app/examples/select-overview/select-overview-example.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<md-select placeholder="Favorite food">
2+
<md-option *ngFor="let food of foods" [value]="food.value">
3+
{{ food.viewValue }}
4+
</md-option>
5+
</md-select>

‎src/app/examples/select-overview/select-overview-example.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'select-overview-example',
6+
templateUrl: './select-overview-example.html',
7+
})
8+
export class SelectOverviewExample {
9+
foods = [
10+
{value: 'steak-0', viewValue: 'Steak'},
11+
{value: 'pizza-1', viewValue: 'Pizza'},
12+
{value: 'tacos-2', viewValue: 'Tacos'}
13+
];
14+
}

0 commit comments

Comments
 (0)