Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit c5d1e93

Browse files
trimoxtrimox
authored
feat(demos): Improved documentation and examples (#1654)
* Add `highlightjs` for code syntax highlighting * Use tabs to display HTML/Sass/TS per example * Use lazy loaded modules * Added more examples * Loads of improvements Closes #1158 Closes #1650 Closes #1646 Closes #1517
1 parent 01766cd commit c5d1e93

File tree

217 files changed

+11296
-5999
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

217 files changed

+11296
-5999
lines changed

‎demos/src/app/app-layout.html

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎demos/src/app/app-layout.ts

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎demos/src/app/app-routing.module.ts

Lines changed: 30 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,46 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33

4-
import { ButtonDemo } from './components/button-demo/button-demo';
5-
import { CardDemo } from './components/card-demo/card-demo';
6-
import { CheckboxDemo } from './components/checkbox-demo/checkbox-demo';
7-
import { ChipsDemo } from './components/chips-demo/chips-demo';
8-
import { DialogDemo } from './components/dialog-demo/dialog-demo';
9-
import { DrawerDemo } from './components/drawer-demo/drawer-demo';
10-
import { ElevationDemo } from './components/elevation-demo/elevation-demo';
11-
import { FabDemo } from './components/fab-demo/fab-demo';
12-
import { FormFieldDemo } from './components/form-field-demo/form-field-demo';
134
import { GettingStarted } from './getting-started';
145
import { Home } from './home/home';
15-
import { IconButtonDemo } from './components/icon-button-demo/icon-button-demo';
16-
import { IconDemo } from './components/icon-demo/icon-demo';
17-
import { ImageListDemo } from './components/image-list-demo/image-list-demo';
18-
import { LinearProgressDemo } from './components/linear-progress-demo/linear-progress-demo';
19-
import { ListDemo } from './components/list-demo/list-demo';
20-
import { MenuDemo } from './components/menu-demo/menu-demo';
21-
import { MenuSurfaceDemo } from './components/menu-surface-demo/menu-surface-demo';
22-
import { RadioDemo } from './components/radio-demo/radio-demo';
23-
import { RippleDemo } from './components/ripple-demo/ripple-demo';
24-
import { SelectDemo } from './components/select-demo/select-demo';
25-
import { SliderDemo } from './components/slider-demo/slider-demo';
26-
import { SnackbarDemo } from './components/snackbar-demo/snackbar-demo';
27-
import { SwitchDemo } from './components/switch-demo/switch-demo';
28-
import { TabsDemo } from './components/tabs-demo/tabs-demo';
29-
import { TextFieldDemo } from './components/text-field-demo/text-field-demo';
30-
import { TopAppBarDemo } from './components/top-app-bar-demo/top-app-bar-demo';
31-
import { TypographyDemo } from './components/typography-demo/typography-demo';
326

337
export const DEMO_DECLARATIONS = [
34-
TopAppBarDemo,
35-
ButtonDemo,
36-
CardDemo,
37-
CheckboxDemo,
38-
ChipsDemo,
39-
DialogDemo,
40-
DrawerDemo,
41-
ElevationDemo,
42-
FabDemo,
43-
FormFieldDemo,
448
GettingStarted,
45-
Home,
46-
IconDemo,
47-
IconButtonDemo,
48-
ImageListDemo,
49-
LinearProgressDemo,
50-
ListDemo,
51-
MenuDemo,
52-
MenuSurfaceDemo,
53-
RadioDemo,
54-
RippleDemo,
55-
SelectDemo,
56-
SliderDemo,
57-
SnackbarDemo,
58-
SnackbarDemo,
59-
SwitchDemo,
60-
TabsDemo,
61-
TextFieldDemo,
62-
TypographyDemo
9+
Home
6310
];
6411

6512
const routes: Routes = [
66-
{ path: 'button-demo', component: ButtonDemo },
67-
{ path: 'card-demo', component: CardDemo },
68-
{ path: 'checkbox-demo', component: CheckboxDemo },
69-
{ path: 'chips-demo', component: ChipsDemo },
70-
{ path: 'dialog-demo', component: DialogDemo },
71-
{ path: 'drawer-demo', component: DrawerDemo },
72-
{ path: 'elevation-demo', component: ElevationDemo },
73-
{ path: 'fab-demo', component: FabDemo },
74-
{ path: 'form-field-demo', component: FormFieldDemo },
13+
{ path: 'button-demo', loadChildren: './components/button-demo/button.module#ButtonModule' },
14+
{ path: 'card-demo', loadChildren: './components/card-demo/card.module#CardModule' },
15+
{ path: 'checkbox-demo', loadChildren: './components/checkbox-demo/checkbox.module#CheckboxModule' },
16+
{ path: 'chips-demo', loadChildren: './components/chips-demo/chips.module#ChipsModule' },
17+
{ path: 'dialog-demo', loadChildren: './components/dialog-demo/dialog.module#DialogModule' },
18+
{ path: 'drawer-demo', loadChildren: './components/drawer-demo/drawer.module#DrawerModule' },
19+
{ path: 'elevation-demo', loadChildren: './components/elevation-demo/elevation.module#ElevationModule' },
20+
{ path: 'fab-demo', loadChildren: './components/fab-demo/fab.module#FabModule' },
21+
{ path: 'form-field-demo', loadChildren: './components/form-field-demo/form-field.module#FormFieldModule' },
7522
{ path: 'getting-started', component: GettingStarted },
7623
{ path: 'home', component: Home, pathMatch: 'full' },
77-
{ path: 'icon-demo', component: IconDemo },
78-
{ path: 'icon-button-demo', component: IconButtonDemo },
79-
{ path: 'image-list-demo', component: ImageListDemo },
80-
{ path: 'linear-progress-demo', component: LinearProgressDemo },
81-
{ path: 'list-demo', component: ListDemo },
82-
{ path: 'menu-demo', component: MenuDemo },
83-
{ path: 'menu-surface-demo', component: MenuSurfaceDemo },
84-
{ path: 'radio-demo', component: RadioDemo },
85-
{ path: 'ripple-demo', component: RippleDemo },
86-
{ path: 'select-demo', component: SelectDemo },
87-
{ path: 'slider-demo', component: SliderDemo },
88-
{ path: 'snackbar-demo', component: SnackbarDemo },
89-
{ path: 'switch-demo', component: SwitchDemo },
90-
{ path: 'tabs-demo', component: TabsDemo },
91-
{ path: 'text-field-demo', component: TextFieldDemo },
92-
{ path: 'top-app-bar-demo', component: TopAppBarDemo },
93-
{ path: 'typography-demo', component: TypographyDemo },
24+
{ path: 'icon-demo', loadChildren: './components/icon-demo/icon.module#IconModule' },
25+
{ path: 'icon-button-demo', loadChildren: './components/icon-button-demo/icon-button.module#IconButtonModule' },
26+
{ path: 'image-list-demo', loadChildren: './components/image-list-demo/image-list.module#ImageListModule' },
27+
{
28+
path: 'linear-progress-demo',
29+
loadChildren: './components/linear-progress-demo/linear-progress.module#LinearProgressModule'
30+
},
31+
{ path: 'list-demo', loadChildren: './components/list-demo/list.module#ListModule' },
32+
{ path: 'menu-demo', loadChildren: './components/menu-demo/menu.module#MenuModule' },
33+
{ path: 'menu-surface-demo', loadChildren: './components/menu-surface-demo/menu-surface.module#MenuSurfaceModule' },
34+
{ path: 'radio-demo', loadChildren: './components/radio-demo/radio.module#RadioModule' },
35+
{ path: 'ripple-demo', loadChildren: './components/ripple-demo/ripple.module#RippleModule' },
36+
{ path: 'select-demo', loadChildren: './components/select-demo/select.module#SelectModule' },
37+
{ path: 'slider-demo', loadChildren: './components/slider-demo/slider.module#SliderModule' },
38+
{ path: 'snackbar-demo', loadChildren: './components/snackbar-demo/snackbar.module#SnackbarModule' },
39+
{ path: 'switch-demo', loadChildren: './components/switch-demo/switch.module#SwitchModule' },
40+
{ path: 'tabs-demo', loadChildren: './components/tabs-demo/tabs.module#TabsModule' },
41+
{ path: 'text-field-demo', loadChildren: './components/text-field-demo/text-field.module#TextFieldModule' },
42+
{ path: 'top-app-bar-demo', loadChildren: './components/top-app-bar-demo/top-app-bar.module#TopAppBarModule' },
43+
{ path: 'typography-demo', loadChildren: './components/typography-demo/typography.module#TypographyModule' },
9444
{ path: '**', redirectTo: 'home' }
9545
];
9646

‎demos/src/app/app.component.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<mdc-top-app-bar class="demo-top-app-bar" #topAppBar fixed>
2+
<mdc-top-app-bar-row>
3+
<mdc-top-app-bar-section align="start" title="Angular MDC">
4+
<button mdcIconButton mdcTopAppBarNavIcon (click)="appDrawer.open = !appDrawer.open" icon="menu"></button>
5+
</mdc-top-app-bar-section>
6+
<mdc-top-app-bar-section align="end">
7+
<span>v{{version}}</span>
8+
<a mdcTopAppBarActionItem href="https://github.com/trimox/angular-mdc-web" alt="GitHub" target="_blank" rel="noopener noreferrer">
9+
<mdc-icon>
10+
<img src="https://trimox.github.io/angular-mdc-web/assets/github-circle-white-transparent.svg" height="24" />
11+
</mdc-icon>
12+
</a>
13+
</mdc-top-app-bar-section>
14+
</mdc-top-app-bar-row>
15+
</mdc-top-app-bar>
16+
17+
<div class="demo-panel">
18+
<mdc-drawer class="demo-drawer" #appDrawer="mdcDrawer" [open]="!isScreenSmall()" [drawer]="isScreenSmall() ? 'modal' : 'dismissible'"
19+
mdcTopAppBarFixedAdjust>
20+
<mdc-drawer-content>
21+
<mdc-list useActivatedClass>
22+
<mdc-list-item (selectionChange)="onDrawerSelect('home')">Home</mdc-list-item>
23+
<mdc-list-divider></mdc-list-divider>
24+
<mdc-list-item (selectionChange)="startVisible = !startVisible">
25+
Getting Started
26+
<mdc-icon mdcListItemMeta>keyboard_arrow_{{startVisible ? 'down' : 'right'}}</mdc-icon>
27+
</mdc-list-item>
28+
<div *ngIf="startVisible">
29+
<mdc-list-item *ngFor="let item of startRoutes" (selectionChange)="onDrawerSelect('getting-started')">{{item.name}}</mdc-list-item>
30+
</div>
31+
<mdc-list-divider></mdc-list-divider>
32+
<mdc-list-item *ngFor="let navItem of navigationLinks" (selectionChange)="onDrawerSelect(navItem.route)">{{navItem.name}}</mdc-list-item>
33+
</mdc-list>
34+
</mdc-drawer-content>
35+
</mdc-drawer>
36+
37+
<div mdcDrawerAppContent mdcTopAppBarFixedAdjust class="demo-panel-section">
38+
<router-outlet></router-outlet>
39+
</div>
40+
</div>
41+
42+
<div class="demo-app-bar-control-container" #demoTopAppBarControls>
43+
<div class="demo-layout__row">
44+
<button mdc-button (click)="topAppBar.fixed = !topAppBar.fixed">Fixed: {{topAppBar.fixed ? 'On' : 'Off'}}</button>
45+
<button mdc-button (click)="topAppBar.prominent = !topAppBar.prominent">Promient: {{topAppBar.prominent ? 'On' :
46+
'Off'}}</button>
47+
<button mdc-button (click)="topAppBar.dense = !topAppBar.dense">Dense: {{topAppBar.dense ? 'On' : 'Off'}}</button>
48+
</div>
49+
<div class="demo-layout__row">
50+
<button mdc-button (click)="topAppBar.short = !topAppBar.short">Short: {{topAppBar.short ? 'On' : 'Off'}}</button>
51+
<button mdc-button (click)="topAppBar.shortCollapsed = !topAppBar.shortCollapsed">Short Collapsed:
52+
{{topAppBar.shortCollapsed ? 'On' : 'Off'}}</button>
53+
</div>
54+
</div>

0 commit comments

Comments
 (0)