Skip to content

Commit 72b0e61

Browse files
yannbfyannbf
committed
feat(component): Add image checkbox
1 parent fff300d commit 72b0e61

File tree

8 files changed

+160
-2
lines changed

8 files changed

+160
-2
lines changed

‎src/app/app.imports.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { TimerProgress } from '../components/timer-progress/timer-progress';
4040
import { ExpandableHeader } from '../components/expandable-header/expandable-header';
4141
import { TypingEffect } from '../components/typing-effect/typing-effect';
4242
import { FlashCardComponent } from '../components/flash-card/flash-card';
43+
import { ImageCheckboxComponent } from '../components/image-checkbox/image-checkbox';
4344

4445
// Pipes
4546
import { MomentPipe } from '../pipes/moment.pipe';
@@ -101,7 +102,8 @@ export const Components = [
101102
TimerProgress,
102103
Timer,
103104
ExpandableHeader,
104-
Autosize
105+
Autosize,
106+
ImageCheckboxComponent,
105107
]
106108

107109
export const Directives = [

‎src/components/image-checkbox/image-checkbox.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<ion-grid>
2+
<ion-row>
3+
<ion-col *ngFor="let option of options"
4+
(click)="select(option)"
5+
[class.selected]="option.selected"
6+
[class.pulse]="option.selected"
7+
class="scroll-item selectable-icon">
8+
<img [src]="option.image"
9+
[style.border-color]="borderColor"/>
10+
<p text-center
11+
[style.color]="textColor">
12+
{{option.text}}
13+
</p>
14+
<ion-icon name="ios-checkmark-circle"
15+
[style.color]="textColor">
16+
</ion-icon>
17+
</ion-col>
18+
</ion-row>
19+
</ion-grid>

‎src/components/image-checkbox/image-checkbox.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { ImageCheckboxComponent } from './image-checkbox';
4+
5+
@NgModule({
6+
declarations: [
7+
ImageCheckboxComponent,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(ImageCheckboxComponent),
11+
],
12+
exports: [
13+
ImageCheckboxComponent
14+
]
15+
})
16+
export class ImageCheckboxComponentModule {}

‎src/components/image-checkbox/image-checkbox.scss

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
image-checkbox {
2+
$my-red: rgb(255,50,81);
3+
ion-scroll[scrollX] {
4+
white-space: nowrap;
5+
height: 75px;
6+
overflow: hidden;
7+
8+
.scroll-content {
9+
background-color: transparent;
10+
padding: 0;
11+
}
12+
13+
.scroll-item {
14+
display: inline-block;
15+
}
16+
17+
.selectable-icon{
18+
padding: 6px;
19+
color: black;
20+
}
21+
}
22+
23+
.pulse {
24+
animation-name: pulsate;
25+
animation-duration: .3s;
26+
animation-timing-function: linear;
27+
}
28+
29+
@keyframes pulsate {
30+
0% {transform: scale(1, 1);}
31+
50% {transform: scale(1.1, 1.1);}
32+
100% {transform: scale(1, 1);}
33+
}
34+
35+
ion-col {
36+
position: relative;
37+
text-align: center;
38+
39+
img{
40+
transition: all .2s linear;
41+
42+
border-radius: 50%;
43+
border: 1px solid $my-red;
44+
padding: 1.5rem;
45+
}
46+
47+
p {
48+
margin: 0;
49+
padding-top: 1rem;
50+
color: $my-red;
51+
}
52+
53+
ion-icon {
54+
color: $my-red;
55+
background: white;
56+
position: absolute;
57+
top: 8%;
58+
right: 8%;
59+
}
60+
61+
&:not(.selected) {
62+
ion-icon {
63+
display: none;
64+
}
65+
66+
img {
67+
opacity: .7;
68+
filter: grayscale(100%);
69+
}
70+
71+
p {
72+
color: #aaa;
73+
}
74+
}
75+
}
76+
}

‎src/components/image-checkbox/image-checkbox.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, Input, Output } from '@angular/core';
2+
3+
@Component({
4+
selector: 'image-checkbox',
5+
templateUrl: 'image-checkbox.html'
6+
})
7+
export class ImageCheckboxComponent {
8+
9+
@Input('options') options;
10+
@Output() onSelected;
11+
12+
borderColor = '#FF0000';
13+
textColor = 'red';
14+
15+
constructor() {
16+
if(!this.options) {
17+
console.log('ImageCheckbox warn: no items were added.');
18+
}
19+
}
20+
21+
select(option) {
22+
this.options.map(opt => opt.selected = opt === option);
23+
// this.onSelected();
24+
}
25+
}

‎src/pages/_home/home.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ <h3>Advanced Ionic 2 Components</h3>
1616
Also, the best way to understand the ionic framework is by reading the <a href="http://ionicframework.com/docs/v2">docs</a>,
1717
which are really great.
1818
</p>
19+
<image-checkbox [options]="options"></image-checkbox>
1920
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
20-
2121
</ion-content>
2222

2323
<!--<sliding-drawer [options]="drawerOptions">

‎src/pages/_home/home.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { SharedModule } from '../../app/shared.module';
12
import { HomePage } from './home';
23
import { NgModule } from '@angular/core';
34
import { IonicPageModule } from 'ionic-angular';
@@ -8,6 +9,7 @@ import { IonicPageModule } from 'ionic-angular';
89
],
910
imports: [
1011
IonicPageModule.forChild(HomePage),
12+
SharedModule,
1113
],
1214
exports: [
1315
HomePage

‎src/pages/_home/home.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,24 @@ import { IonicPage, NavController } from 'ionic-angular';
88
})
99
export class HomePage {
1010

11+
options = [
12+
{
13+
selected: false,
14+
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753629_people_512x512.png',
15+
text: 'Beginner',
16+
},
17+
{
18+
selected: false,
19+
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753631_character_512x512.png',
20+
text: 'Intermediate',
21+
},
22+
{
23+
selected: false,
24+
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753637_wizard_512x512.png',
25+
text: 'Advanced',
26+
},
27+
]
28+
1129
drawerOptions: any;
1230
constructor(public navCtrl: NavController) {
1331
this.drawerOptions = {

0 commit comments

Comments
 (0)