Skip to content
This repository was archived by the owner on Nov 30, 2022. It is now read-only.

Commit b9123b4

Browse files
garygrossgartengarygrossgarten
authored
Merge pull request #162 from vagnersabadi/update-documentation
Update documentation
2 parents ce77e05 + fb2a0ce commit b9123b4

File tree

14 files changed

+285
-43
lines changed

14 files changed

+285
-43
lines changed

‎src/app/pages/dialog/dialog.page.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,18 @@
5858

5959

6060
</ion-content>
61-
<fiv-dialog (fivClose)="close()" [pullEnabled]="pull" (fivDurationOver)="dialog.close()" [inDuration]="inDuration"
62-
[outDuration]="outDuration" #dialog [duration]="duration" [shape]="shape" [horizontalAlign]="horizontalAlign"
63-
[verticalAlign]="verticalAlign" [backdrop]="backdrop">
61+
<fiv-dialog
62+
(fivClose)="close()"
63+
[pullEnabled]="pull"
64+
(fivDurationOver)="dialog.close()"
65+
[inDuration]="inDuration"
66+
[outDuration]="outDuration"
67+
#dialog
68+
[duration]="duration"
69+
[shape]="shape"
70+
[horizontalAlign]="horizontalAlign"
71+
[verticalAlign]="verticalAlign"
72+
[backdrop]="backdrop">
6473

6574
<ion-card-header>
6675
<ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>

‎src/app/pages/editable-label/editable-label.page.html‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,64 @@
77
<ion-row>
88
<ion-col sizeXl="10" offsetXl="1" sizeLg="10" offsetLg="1" sizeMd="12" sizeXs="12" offsetXs="0" offsetSm="0"
99
offsetMd="0" sizeSm="12" sizeMd="12">
10-
<ion-item>
11-
<ion-label>Editing</ion-label>
12-
<ion-checkbox slot="start" [(ngModel)]="editing"></ion-checkbox>
13-
</ion-item>
14-
15-
<ion-card>
16-
<ion-card-content>
17-
<fiv-editable-label value="Not in a form" [editing]="editing"></fiv-editable-label>
18-
</ion-card-content>
19-
</ion-card>
20-
21-
<ion-card>
22-
<ion-card-content>
23-
<ion-item>
24-
<fiv-editable-label value="Text with NgModel" [(ngModel)]="model" [editing]="editing">
25-
</fiv-editable-label>
26-
</ion-item>
27-
28-
<ion-item>
29-
<ion-label>{{model}}</ion-label>
30-
</ion-item>
31-
</ion-card-content>
32-
</ion-card>
33-
34-
<form [formGroup]="form" (ngSubmit)="onSubmit()">
10+
11+
12+
<app-example
13+
[api]="'assets/docs/snippets/editable-label/api.md'"
14+
[typescript]="'assets/docs/snippets/editable-label/ts.md'"
15+
[css]="'assets/docs/snippets/editable-label/css.md'"
16+
[html]="'assets/docs/snippets/editable-label/html.md'"
17+
[title]="'Editable Label Component'"
18+
[subtitle]="''">
19+
20+
<ion-item>
21+
<ion-label>Editing</ion-label>
22+
<ion-checkbox slot="start" [(ngModel)]="editing"></ion-checkbox>
23+
</ion-item>
24+
25+
<ion-card>
26+
<ion-card-content>
27+
<fiv-editable-label value="Not in a form" [editing]="editing"></fiv-editable-label>
28+
</ion-card-content>
29+
</ion-card>
30+
3531
<ion-card>
36-
<ion-toolbar>
37-
<fiv-editable-label value="Title" type="title" formControlName="title" [editing]="editing">
38-
</fiv-editable-label>
39-
</ion-toolbar>
4032
<ion-card-content>
4133
<ion-item>
42-
<fiv-editable-label value="Your Name" formControlName="name" [editing]="editing"></fiv-editable-label>
34+
<fiv-editable-label value="Text with NgModel" [(ngModel)]="model" [editing]="editing">
35+
</fiv-editable-label>
36+
</ion-item>
37+
38+
<ion-item>
39+
<ion-label>{{model}}</ion-label>
4340
</ion-item>
4441
</ion-card-content>
4542
</ion-card>
46-
<ion-button block color="primary" type="submit">
47-
Login
48-
</ion-button>
49-
</form>
50-
51-
<ion-card>
52-
<ion-card-content>
53-
{{form.value | json}}
54-
</ion-card-content>
55-
</ion-card>
43+
44+
45+
<form [formGroup]="form" (ngSubmit)="onSubmit()">
46+
<ion-card>
47+
<ion-toolbar>
48+
<fiv-editable-label value="Title" type="title" formControlName="title" [editing]="editing">
49+
</fiv-editable-label>
50+
</ion-toolbar>
51+
<ion-card-content>
52+
<ion-item>
53+
<fiv-editable-label value="Your Name" formControlName="name" [editing]="editing"></fiv-editable-label>
54+
</ion-item>
55+
</ion-card-content>
56+
</ion-card>
57+
<ion-button block color="primary" type="submit">
58+
Login
59+
</ion-button>
60+
</form>
61+
<ion-card>
62+
<ion-card-content>
63+
{{form.value | json}}
64+
</ion-card-content>
65+
</ion-card>
66+
67+
</app-example>
5668
</ion-col>
5769
</ion-row>
5870
</ion-grid>

‎src/assets/docs/snippets/dialog/api.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```typescript
2+
...
3+
import { FivDialogModule } from '@fivethree/core';
4+
5+
@NgModule({
6+
imports: [
7+
...
8+
FivDialogModule
9+
],
10+
...
11+
})
12+
export class DialogPageModule {}
13+
```

‎src/assets/docs/snippets/dialog/css.md‎

Whitespace-only changes.

‎src/assets/docs/snippets/dialog/html.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```html
2+
...
3+
<ion-button (click)="dialog.open()">
4+
Show Dialog
5+
</ion-button>
6+
...
7+
<fiv-dialog
8+
(fivClose)="close()"
9+
[pullEnabled]="pull"
10+
(fivDurationOver)="dialog.close()"
11+
[inDuration]="inDuration"
12+
[outDuration]="outDuration"
13+
#dialog
14+
[duration]="duration"
15+
[shape]="shape"
16+
[horizontalAlign]="horizontalAlign"
17+
[verticalAlign]="verticalAlign"
18+
[backdrop]="backdrop"
19+
>
20+
<ion-card-header>
21+
<ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
22+
<ion-card-title>Awesome Title</ion-card-title>
23+
</ion-card-header>
24+
<ion-card-content>
25+
<p>The content for this dialog</p>
26+
</ion-card-content>
27+
<ion-toolbar>
28+
<ion-buttons slot="end">
29+
<ion-button (click)="dialog.close()">
30+
Cancel
31+
</ion-button>
32+
<ion-button color="primary">
33+
Do Action
34+
</ion-button>
35+
</ion-buttons>
36+
</ion-toolbar>
37+
</fiv-dialog>
38+
```

‎src/assets/docs/snippets/dialog/ts.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```typescript
2+
import { Component, OnInit, ViewChild } from '@angular/core';
3+
import { FivDialog } from '@fivethree/core';
4+
5+
@Component({
6+
selector: 'app-dialog',
7+
templateUrl: './dialog.page.html',
8+
styleUrls: ['./dialog.page.scss']
9+
})
10+
export class DialogPage implements OnInit {
11+
@ViewChild('dialog') dialog: FivDialog;
12+
13+
backdrop = true;
14+
pull = true;
15+
verticalAlign = 'top';
16+
horizontalAlign = 'left';
17+
shape = 'card';
18+
duration = 3600;
19+
inDuration = '220';
20+
outDuration = '180';
21+
22+
constructor() {}
23+
24+
ngOnInit() {}
25+
26+
close() {}
27+
28+
over() {}
29+
}
30+
31+
```

‎src/assets/docs/snippets/editable-label/api.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```typescript
2+
...
3+
import { FivEditableLabelModule } from '@fivethree/core';
4+
5+
@NgModule({
6+
imports: [
7+
...
8+
FivEditableLabelModule
9+
],
10+
...
11+
})
12+
export class DialogPageModule {}
13+
```

‎src/assets/docs/snippets/editable-label/css.md‎

Whitespace-only changes.

‎src/assets/docs/snippets/editable-label/html.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```html
2+
...
3+
<form [formGroup]="form" (ngSubmit)="onSubmit()">
4+
<ion-card>
5+
<ion-toolbar>
6+
<fiv-editable-label
7+
value="Title"
8+
type="title"
9+
formControlName="title"
10+
[editing]="editing"
11+
>
12+
</fiv-editable-label>
13+
</ion-toolbar>
14+
<ion-card-content>
15+
<ion-item>
16+
<fiv-editable-label
17+
value="Your Name"
18+
formControlName="name"
19+
[editing]="editing"
20+
></fiv-editable-label>
21+
</ion-item>
22+
</ion-card-content>
23+
</ion-card>
24+
<ion-button block color="primary" type="submit">
25+
Login
26+
</ion-button>
27+
</form>
28+
...
29+
```

‎src/assets/docs/snippets/editable-label/ts.md‎

Whitespace-only changes.

0 commit comments

Comments
 (0)