Skip to content

Commit e0c071d

Browse files
rafaelblinkrafaelblink
committed
updating documentation and demo
1 parent 45cbd59 commit e0c071d

File tree

5 files changed

+78
-38
lines changed

5 files changed

+78
-38
lines changed

‎README.md

+22-3
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,20 @@ Let's go create the first checkbox.
3838
3939
## Basic Configuration
4040
41+
### TS
4142
```bash
42-
<ngx-checkbox [label]="'Checkbox 1'" [color]="'p-success'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
43+
import { CustomCheckBoxModel } from 'angular-custom-checkbox';
44+
...
45+
46+
export class AppExampleComponent implements OnInit {
47+
isSelected: boolean = false;
48+
jsonModel: CustomCheckBoxModel = new CustomCheckBoxModel();
49+
}
50+
51+
```
52+
### HTML
53+
```bash
54+
<ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
4355
```
4456
4557
**PS: Use variable on ngModel as boolean.**
@@ -55,7 +67,10 @@ Let's go create the first checkbox.
5567
## Advanced Configuration
5668
5769
```bash
58-
<ngx-checkbox [label]="'Checkbox 2'" [colorHex]="'#F500FF'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'mdi mdi-check'" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
70+
this.jsonModel.color = 'p-success';
71+
this.jsonModel.colorHex = '#F500FF';
72+
this.jsonModel.rounded = true;
73+
this.jsonModel.icon = 'mdi mdi-check';
5974
```
6075

6176
## Icons:
@@ -81,4 +96,8 @@ Import the css files to your ``.angular-cli.json`` like:
8196
],
8297
```
8398

84-
And use for example: ``[icon]="'fa fa-check'"``.
99+
And use for example:
100+
101+
```bash
102+
this.jsonModel.icon = 'fa fa-check';
103+
```

‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
{
22
"name": "angular-custom-checkbox",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"license": "MIT",
5+
"homepage": "http://rafaelferreira.info/angular-custom-checkbox/",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/rafaelblink/angular-custom-checkbox"
9+
},
510
"scripts": {
611
"ng": "ng",
712
"start": "ng serve",
@@ -52,4 +57,4 @@
5257
"tslint": "~5.7.0",
5358
"typescript": "~2.4.2"
5459
}
55-
}
60+
}

‎src/app/app.component.html

+31-28
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,40 @@ <h2>Basic Configuration</h2>
44

55
<ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
66
<pre class="boolean">{{ isSelected }}</pre>
7+
<b>TS:</b>
8+
<pre><![CDATA[
9+
import { CustomCheckBoxModel } from 'angular-custom-checkbox';
10+
...
11+
12+
export class AppExampleComponent implements OnInit {
13+
isSelected: boolean = false;
14+
configuration: CustomCheckBoxModel = new CustomCheckBoxModel();´
15+
...
16+
}]]></pre>
717
<b>HTML:</b>
8-
<pre><![CDATA[<ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>]]></pre>
9-
10-
<!-- <h4>Colors</h4>
11-
<ngx-checkbox [label]="'p-primary'" [color]="'p-primary'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
12-
13-
<ngx-checkbox [label]="'p-success'" [color]="'p-success'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
14-
15-
<ngx-checkbox [label]="'p-danger'" [color]="'p-danger'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
16-
17-
<ngx-checkbox [label]="'p-info'" [color]="'p-info'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
18-
19-
<ngx-checkbox [label]="'p-warning'" [color]="'p-warning'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
20-
21-
18+
<pre><![CDATA[<ngx-checkbox [configuration]="configuration" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>]]></pre>
19+
20+
<h4>Colors</h4>
21+
p-primary
22+
<ngx-checkbox [configuration]="configurationPrimary" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
23+
p-success
24+
<ngx-checkbox [configuration]="configurationSuccess" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
25+
p-danger
26+
<ngx-checkbox [configuration]="configurationDanger" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
27+
p-info
28+
<ngx-checkbox [configuration]="configurationInfo" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
29+
p-warning
30+
<ngx-checkbox [configuration]="configurationWarning" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
31+
2232
<h2>Advanced Configuration</h2>
2333

24-
<ngx-checkbox [label]="'Material Design Icons'" [colorHex]="'#F500FF'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'mdi mdi-check'"
25-
[(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>
26-
<pre class="boolean">{{ isSelected2 }}</pre>
27-
<b>Code:</b>
28-
<pre><![CDATA[<ngx-checkbox [label]="'Checkbox 2'" [colorHex]="'#F500FF'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'mdi mdi-check'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre>
29-
30-
<h4>Icons and Colors</h4>
31-
<ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#18CDCA'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'fa fa-check'"
32-
[(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>
33-
<ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#FF302C'" [colorInside]="'#FFF'" [rounded]="false" [icon]="'fa fa-times'"
34-
[(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>
34+
<ngx-checkbox [configuration]="configurationCustom" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
3535
<br>
3636
<br>
37-
<b>Code:</b>
38-
<pre><![CDATA[ <ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#18CDCA'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'fa fa-check'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre>
39-
<pre><![CDATA[ <ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#FF302C'" [colorInside]="'#FFF'" [rounded]="false" [icon]="'fa fa-times'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre> -->
37+
<b>TS:</b>
38+
<pre><![CDATA[
39+
this.configurationCustom.colorHex = '#F500FF';
40+
this.configurationCustom.colorInside = '#FFF' //or 'white';
41+
this.configurationCustom.rounded = true;
42+
this.configurationCustom.icon = 'fa fa-pencil';]]></pre>
4043
</div>

‎src/app/app.component.ts

+17-4
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,24 @@ export class AppComponent implements OnInit {
1111
title = 'app';
1212
isSelected: boolean = true;
1313
isSelected2: boolean = true;
14-
jsonModel: CustomCheckBoxModel;
14+
jsonModel: CustomCheckBoxModel = new CustomCheckBoxModel();
15+
configurationPrimary: CustomCheckBoxModel = new CustomCheckBoxModel();
16+
configurationSuccess: CustomCheckBoxModel = new CustomCheckBoxModel();
17+
configurationDanger: CustomCheckBoxModel = new CustomCheckBoxModel();
18+
configurationInfo: CustomCheckBoxModel = new CustomCheckBoxModel();
19+
configurationWarning: CustomCheckBoxModel = new CustomCheckBoxModel();
20+
configurationCustom: CustomCheckBoxModel = new CustomCheckBoxModel();
1521

1622
ngOnInit() {
17-
this.jsonModel = new CustomCheckBoxModel();
18-
this.jsonModel.icon = 'fa fa-pencil';
19-
this.jsonModel.color = 'p-danger';
23+
this.configurationPrimary.color = 'p-primary';
24+
this.configurationSuccess.color = 'p-success';
25+
this.configurationDanger.color = 'p-danger';
26+
this.configurationInfo.color = 'p-info';
27+
this.configurationWarning.color = 'p-warning';
28+
29+
this.configurationCustom.colorHex = '#F500FF'
30+
this.configurationCustom.colorInside = '#FFF' //or 'white'
31+
this.configurationCustom.rounded = true;
32+
this.configurationCustom.icon = 'fa fa-pencil'
2033
}
2134
}

‎src/app/custom-checkbox/custom-checkbox.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class CustomCheckboxComponent implements OnInit, ControlValueAccessor {
7272
this.styleIcon = `${this.styleIcon}${this.configuration.icon}`;
7373
}
7474
else {
75-
this.styleIcon = `${this.styleIcon} fa fa-check`
75+
this.styleIcon = `${this.styleIcon} mdi mdi-check`
7676
}
7777
}
7878

0 commit comments

Comments
 (0)