javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

basic e2e checkbox test

Browse Source
This commit is contained in:
Tim Lancina
2015-07-27 15:48:14 -05:00
parent 0770abfc44
commit 4698763ce7
6 changed files with 20 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ionic/components/checkbox/checkbox.scss
View File

@ -14,28 +14,6 @@
left: -9999px; left: -9999px;
} }
.checkbox-on {
display: none;
pointer-events: none;
}
.checkbox-off {
display: block;
pointer-events: none;
}
.checkbox[aria-checked=true] {
.checkbox-on {
display: block;
}
.checkbox-off {
display: none;
}
}
.checkbox[aria-disabled=true] { .checkbox[aria-disabled=true] {
opacity: 0.5; opacity: 0.5;
color: gray; color: gray;

11
ionic/components/checkbox/checkbox.ts
View File

@ -20,17 +20,16 @@ import {Icon} from '../icon/icon';
host: { host: {
'[class.item]': 'item', '[class.item]': 'item',
'[attr.aria-checked]': 'input.checked' '[attr.aria-checked]': 'input.checked'
},
defaultProperties: {
'iconOff': 'ion-ios-circle-outline',
'iconOn': 'ion-ios-checkmark'
} }
// defaultProperties: {
// 'iconOff': 'ion-ios-circle-outline',
// 'iconOn': 'ion-ios-checkmark'
// }
}) })
@IonicView({ @IonicView({
template: template:
'<div class="item-media media-checkbox">' + '<div class="item-media media-checkbox">' +
'<icon [name]="iconOff" class="checkbox-off"></icon>' + '<div class="media-checkbox-outline"></div>' +
'<icon [name]="iconOn" class="checkbox-on"></icon>' +
'</div>' + '</div>' +
'<div class="item-content">' + '<div class="item-content">' +
'<content></content>' + '<content></content>' +

6
ionic/components/checkbox/extensions/ios.scss
View File

@ -8,8 +8,14 @@ $checkbox-ios-color: #007aff;
.checkbox[mode="ios"] { .checkbox[mode="ios"] {
.media-checkbox { .media-checkbox {
height: 20px;
min-width: 20px; min-width: 20px;
color: $checkbox-ios-color; color: $checkbox-ios-color;
background-color: $checkbox-ios-color;
}
&[aria-checked=false] .media-checkbox {
background-color: red;
} }
} }

5
ionic/components/checkbox/extensions/material.scss
View File

@ -19,6 +19,7 @@ $checkbox-md-color: #007aff;
.media-checkbox-outline { .media-checkbox-outline {
min-width: 20px; min-width: 20px;
color: $checkbox-md-color; color: $checkbox-md-color;
background-color: $checkbox-md-color;
position: absolute; position: absolute;
top: 3px; top: 3px;
@ -35,4 +36,8 @@ $checkbox-md-color: #007aff;
z-index: 2; z-index: 2;
} }
&[aria-checked=false] .media-checkbox-outline {
background-color: red;
}
} }

3
ionic/components/checkbox/test/basic/e2e.ts Normal file
View File

@ -0,0 +1,3 @@
it('should toggle checkbox state with label click', function() {
element(by.css('#appleLabel')).click();
});

2
ionic/components/checkbox/test/basic/main.html
View File

@ -1,7 +1,7 @@
<ion-content> <ion-content>
<form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm"> <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
<ion-list> <ion-list>
<ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label>Apple</label><input checked="hello" type="checkbox"></ion-checkbox> <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label id="appleLabel">Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox> <ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox> <ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox> <ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>