forked from Lowgular/ng-material-starter-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
html-templates.json
109 lines (109 loc) · 9.3 KB
/
html-templates.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
{
"lines": {
"paragraph": "<p>$content$</p>"
},
"cards": {
"simple": "<mat-card *ngIf=\"$itemVariable$\">$itemVariable$</mat-card>"
},
"layouts": {
"add-button": "<button mat-mini-fab><mat-icon>add</mat-icon></button>",
"edit-button": "<button mat-mini-fab><mat-icon>edit</mat-icon></button>",
"remove-button": "<button mat-mini-fab><mat-icon>remove</mat-icon></button>",
"card": "<mat-card><mat-card-title></mat-card-title><mat-card-content></mat-card-content></mat-card>",
"toolbar": "<mat-toolbar color=\"primary\"></mat-toolbar>",
"two-columns-grid": "<mat-grid-list cols=\"2\" rowHeight=\"2:1\">\n <mat-grid-tile>Left</mat-grid-tile>\n <mat-grid-tile>Right</mat-grid-tile>\n</mat-grid-list>",
"stepper": "<mat-stepper #stepper>\n <mat-step label=\"Step 1\">\n <section>Step 2</section>\n <div>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Step 2\">\n <section>Step 2</section>\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button matStepperNext>Next</button>\n </div>\n </mat-step>\n <mat-step label=\"Done\">\n <p>You are now done.</p>\n <div>\n <button mat-button matStepperPrevious>Back</button>\n <button mat-button (click)=\"stepper.reset()\">Reset</button>\n </div>\n </mat-step>\n</mat-stepper>",
"tabs": "<mat-tab-group>\n <mat-tab label=\"First\"> Content 1 </mat-tab>\n <mat-tab label=\"Second\"> Content 2 </mat-tab>\n <mat-tab label=\"Third\"> Content 3 </mat-tab>\n</mat-tab-group>",
"layouts": "<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n <mat-button-toggle value=\"bold\">Bold</mat-button-toggle>\n <mat-button-toggle value=\"italic\">Italic</mat-button-toggle>\n <mat-button-toggle value=\"underline\">Underline</mat-button-toggle>\n</mat-button-toggle-group>",
"table": "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\">\n <ng-container matColumnDef=\"position\">\n <th mat-header-cell *matHeaderCellDef> No. </th>\n <td mat-cell *matCellDef=\"let element\"> {{element.position}} </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>",
"spinner": "<mat-progress-spinner\n [color]=\"'primary'\"\n [mode]=\"'indeterminate'\"\n [value]=\"50\">\n </mat-progress-spinner>",
"progress-bar": " <mat-progress-bar\n class=\"example-margin\"\n [color]=\"'primary'\"\n [mode]=\"'indeterminate'\"\n [value]=\"50\">\n </mat-progress-bar>",
"simple-no-data-template": " <ng-template #emptyState>\n Oops! There is no data!\n </ng-template>",
"image-no-data-template": " <ng-template #emptyState>\n <div style=\"text-align: center\"><img style=\"height: 500px\" src=\"assets/no-data.jpg\"></div>\n <div style=\"text-align: center\"><a\n href=\"https://www.freepik.com/free-vector/no-data-concept-illustration_5928292.htm#query=no%20data%20found&position=0&from_view=keyword\">Image\n by storyset</a> on Freepik\n </div>\n </ng-template>"
},
"inputs": {
"input-default": "<input matInput type=\"text\" placeholder=\"$label$\" formControlName=\"$formControlName$\" required>",
"input-text": "<input matInput type=\"text\" placeholder=\"$label$\" formControlName=\"$formControlName$\" required>",
"input-number": "<input matInput type=\"number\" placeholder=\"$label$\" formControlName=\"$formControlName$\" required>",
"input-submit": "<button type=\"submit\" mat-raised-button color=\"primary\">$content$</button>"
},
"forms": {
"mat-form": {
"input": "<div><mat-form-field appearance=\"fill\"><mat-label>$label$</mat-label>$inputs.input-text$<mat-error *ngIf=\"$formVariable$.get('$formControlName$')!.invalid\">$formControlName$ is invalid</mat-error></mat-form-field></div>",
"formSubmit": "<div>$inputs.input-submit$</div>",
"form": "<form [formGroup]=\"$formVariable$\" (ngSubmit)=\"$submitCallback$\">$content$</form>"
}
},
"lists": {
"list": {
"list": "<mat-list role=\"list\">$content$</mat-list>",
"item": "<mat-list-item role=\"listitem\" *ngFor=\"let $itemVariable$ of $listVariable$\">{{$itemVariable$}}</mat-list-item>"
},
"selection-list": {
"list": "<mat-selection-list role=\"list\">$content$</mat-selection-list>",
"item": "<mat-list-option role=\"listitem\" *ngFor=\"let $itemVariable$ of $listVariable$\">{{$itemVariable$}}</mat-list-option>"
},
"navbar": {
"list": "<mat-list role=\"list\" fxLayout=\"row\">\n $content$\n</mat-list>",
"item": "<mat-list-item role=\"listitem\" *ngFor=\"let $itemVariable$ of $listVariable$\">\n {{$itemVariable$}}\n</mat-list-item>"
},
"navbar-with-selection": {
"list": "<mat-selection-list role=\"list\" fxLayout=\"row\" [multiple]=\"false\">\n $content$\n</mat-selection-list>",
"item": "<mat-list-option role=\"listoption\" *ngFor=\"let $itemVariable$ of $listVariable$\" [value]=\"$itemVariable$\">\n {{$itemVariable$}}\n</mat-list-option>"
},
"chip-list": {
"list": "<mat-chip-list aria-label=\"Fish selection\">\n $content$\n</mat-chip-list>",
"item": "<mat-chip *ngFor=\"let $itemVariable$ of $listVariable$\">\n {{$itemVariable$}}\n</mat-chip>"
},
"accordion": {
"list": "<mat-accordion>\n $content$\n</mat-accordion>",
"item": "<mat-expansion-panel *ngFor=\"let $itemVariable$ of $listVariable$\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n This is a title\n </mat-panel-title>\n <mat-panel-description>\n This is a summary of the content\n </mat-panel-description>\n </mat-expansion-panel-header>\n {{$itemVariable$}}\n </mat-expansion-panel>"
},
"grid-list": {
"list": "<mat-grid-list cols=\"2\" rowHeight=\"2:1\">\n $content$\n</mat-grid-list>",
"item": "<mat-grid-tile *ngFor=\"let $itemVariable$ of $listVariable$\">\n {{$itemVariable$}}\n</mat-grid-tile>"
},
"menu": {
"list": "<button mat-button [matMenuTriggerFor]=\"menu\">Menu</button>\n<mat-menu #menu=\"matMenu\">\n $content$\n</mat-menu>",
"item": "<button mat-menu-item *ngFor=\"let $itemVariable$ of $listVariable$\">\n {{$itemVariable$}}\n</button>"
},
"select": {
"list": "<mat-form-field appearance=\"fill\">\n <mat-label>Choose an option</mat-label>\n <mat-select>\n $content$\n </mat-select>\n</mat-form-field>",
"item": "<mat-option *ngFor=\"let $itemVariable$ of $listVariable$\" [value]=\"$itemVariable$\">\n {{$itemVariable$}} \n</mat-option>"
},
"autocomplete": {
"list": "<mat-form-field appearance=\"fill\">\n <mat-label>Choose an option</mat-label>\n <input type=\"text\"\n placeholder=\"Pick one\"\n matInput\n formControlName=\"$controlName$\"\n [matAutocomplete]=\"$controlName$\"><mat-autocomplete #$controlName$=\"matAutocomplete\">\n $content$\n </mat-autocomplete>\n</mat-form-field>",
"item": "<mat-option *ngFor=\"let $itemVariable$ of $listVariable$\" [value]=\"$itemVariable$\">\n {{$itemVariable$}} \n</mat-option>"
},
"table": {
"list": " <ng-container *ngIf=\"$listVariable$ as list\">\n <table mat-table [dataSource]=\"list\" class=\"mat-elevation-z8\"> $content$ \n </table>\n </ng-container>",
"item": " <!-- Column 1 -->\n <ng-container matColumnDef=\"column1\">\n <th mat-header-cell *matHeaderCellDef> column1 </th>\n <td mat-cell *matCellDef=\"let element\"> {{ element }} </td>\n </ng-container>\n <!-- Column 2 -->\n <ng-container matColumnDef=\"column2\">\n <th mat-header-cell *matHeaderCellDef> column2 </th>\n <td mat-cell *matCellDef=\"let element\"> {{element}} </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['column1', 'column2']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['column1', 'column2'];\"></tr>"
},
"radio-group": {
"list": "<mat-radio-group aria-label=\"Select an option\">\n $content$\n</mat-radio-group>",
"item": "<mat-radio-button *ngFor=\"let $itemVariable$ of $listVariable$\">{{$itemVariable$}}</mat-radio-button>"
},
"checkbox": {
"list": "<section>\n $content$\n</section>",
"item": "<mat-checkbox *ngFor=\"let $itemVariable$ of $listVariable$\">{{$itemVariable$}}</mat-checkbox>"
}
},
"details": {
"content": {
"container": "<ng-container *ngIf=\"$detailVariable$ | async as $itemVariable$\">$content$</ng-container>",
"content": "$content$"
},
"text": {
"container": "<ng-container *ngIf=\"$detailVariable$ | async as $itemVariable$\">$content$</ng-container>",
"content": "{{ $itemVariable$ }}"
},
"title-description": {
"container": "<ng-container *ngIf=\"$detailVariable$ | async as $itemVariable$\">$content$</ng-container>",
"content": "<h1>$title</h1>\n<p>$description$</p>"
},
"mat-title-content-button": {
"container": "<mat-card *ngIf=\"$data | async as item\">\n$content$</mat-card>",
"content": "<mat-card-title>$TITLE$</mat-card-title>\n<mat-card-content>$CONTENT$</mat-card-content>\n<mat-button-toggle (click)=\"$yourFn$()\">$BUTTON_TEXT$</mat-button-toggle>"
}
}
}