mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
e2e: make examples build per-platform
This commit is contained in:
@@ -3,6 +3,22 @@ import {ComponentConfig} from 'ionic2/config/component-config'
|
||||
import * as types from 'ionic2/components/aside/extensions/types'
|
||||
import * as gestures from 'ionic2/components/aside/extensions/gestures';
|
||||
|
||||
export let AsideConfig = new ComponentConfig('aside')
|
||||
|
||||
AsideConfig.classes('side', 'type')
|
||||
|
||||
AsideConfig.delegate('gesture')
|
||||
.when({side: 'left'}, gestures.LeftAsideGesture)
|
||||
.when({side: 'right'}, gestures.RightAsideGesture)
|
||||
.when({side: 'top'}, gestures.TopAsideGesture)
|
||||
.when({side: 'bottom'}, gestures.BottomAsideGesture)
|
||||
|
||||
AsideConfig.delegate('type')
|
||||
.when({type: 'overlay'}, types.AsideTypeOverlay)
|
||||
.when({type: 'push'}, types.AsideTypePush)
|
||||
.when({type: 'reveal'}, types.AsideTypeReveal)
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-aside',
|
||||
bind: {
|
||||
@@ -59,19 +75,3 @@ export class Aside {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export let AsideConfig = new ComponentConfig(Aside)
|
||||
|
||||
AsideConfig.classes('side', 'type')
|
||||
|
||||
AsideConfig.delegate('gesture')
|
||||
.when({side: 'left'}, gestures.LeftAsideGesture)
|
||||
.when({side: 'right'}, gestures.RightAsideGesture)
|
||||
.when({side: 'top'}, gestures.TopAsideGesture)
|
||||
.when({side: 'bottom'}, gestures.BottomAsideGesture)
|
||||
|
||||
AsideConfig.delegate('type')
|
||||
.when({type: 'overlay'}, types.AsideTypeOverlay)
|
||||
.when({type: 'push'}, types.AsideTypePush)
|
||||
.when({type: 'reveal'}, types.AsideTypeReveal)
|
||||
|
||||
|
||||
1
src/components/checkbox/checkbox.html
Normal file
1
src/components/checkbox/checkbox.html
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2';
|
||||
import {ComponentConfig} from 'ionic2/config/component-config';
|
||||
|
||||
export let CheckboxConfig = new ComponentConfig('checkbox');
|
||||
|
||||
@Component({
|
||||
selector: 'ion-checkbox',
|
||||
bind: {
|
||||
checked: 'checked'
|
||||
},
|
||||
events: {
|
||||
'click': 'onClick'
|
||||
},
|
||||
services: [CheckboxConfig]
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
<div class="item-media media-checkbox">
|
||||
<icon class="ion-ios-circle-outline checkbox-off"></icon>
|
||||
<icon class="ion-ios-checkmark checkbox-on"></icon>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
|
||||
<div class="item-title">
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
</div>`
|
||||
})
|
||||
export class Checkbox {
|
||||
constructor(
|
||||
@PropertySetter('attr.role') setRole: Function,
|
||||
@PropertySetter('attr.aria-checked') setChecked: Function,
|
||||
@PropertySetter('attr.aria-invalid') setInvalid: Function,
|
||||
@PropertySetter('attr.aria-disabled') setDisabled: Function,
|
||||
configFactory: CheckboxConfig,
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement;
|
||||
this.domElement.classList.add('item');
|
||||
this.config = configFactory.create(this);
|
||||
|
||||
setRole('checkbox');
|
||||
setChecked('true')
|
||||
setInvalid('false');
|
||||
setDisabled('false');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
$checkbox-ios-color: #007aff;
|
||||
|
||||
|
||||
.list-ios {
|
||||
.checkbox-ios {
|
||||
|
||||
.media-checkbox {
|
||||
min-width: 20px;
|
||||
|
||||
@@ -5,85 +5,23 @@
|
||||
|
||||
<div class="content" style="background: #efeff4">
|
||||
|
||||
<div class="list list-ios">
|
||||
<ion-list>
|
||||
<ion-list-header>Some Checkboxes</ion-list-header>
|
||||
|
||||
<ion-checkbox>
|
||||
Apples
|
||||
</ion-checkbox>
|
||||
|
||||
<div class="list-header">
|
||||
iOS Checkboxes
|
||||
</div>
|
||||
<ion-checkbox>
|
||||
Bananas
|
||||
</ion-checkbox>
|
||||
|
||||
<div class="list-content">
|
||||
<ion-checkbox>
|
||||
Oranges
|
||||
</ion-checkbox>
|
||||
|
||||
|
||||
|
||||
<div class="item checkbox ios-checkbox"
|
||||
role="checkbox"
|
||||
aria-checked="true"
|
||||
aria-invalid="false">
|
||||
|
||||
<div class="item-media media-checkbox">
|
||||
<icon class="ion-ios-circle-outline checkbox-off"></icon>
|
||||
<icon class="ion-ios-checkmark checkbox-on"></icon>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
|
||||
<div class="item-title">
|
||||
Apples
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="item checkbox ios-checkbox"
|
||||
role="checkbox"
|
||||
aria-checked="false"
|
||||
aria-invalid="false">
|
||||
|
||||
<div class="item-media media-checkbox">
|
||||
<icon class="ion-ios-circle-outline checkbox-off"></icon>
|
||||
<icon class="ion-ios-checkmark checkbox-on"></icon>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
|
||||
<div class="item-title">
|
||||
Bananas
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="item checkbox ios-checkbox"
|
||||
role="checkbox"
|
||||
aria-checked="true"
|
||||
aria-invalid="false">
|
||||
|
||||
<div class="item-media media-checkbox">
|
||||
<icon class="ion-ios-circle-outline checkbox-off"></icon>
|
||||
<icon class="ion-ios-checkmark checkbox-on"></icon>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
|
||||
<div class="item-title">
|
||||
Oranges
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-list>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,12 +3,13 @@ import {Component, Template} from 'angular2/angular2';
|
||||
import {View} from 'ionic2/components/view/view';
|
||||
import {Content} from 'ionic2/components/content/content';
|
||||
import {Icon} from 'ionic2/components/icon/icon';
|
||||
|
||||
import {Checkbox} from 'ionic2/components/checkbox/checkbox';
|
||||
import {List} from 'ionic2/components/list/list';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
url: 'main.html',
|
||||
directives: [View, Content, Icon]
|
||||
directives: [View, Content, Icon, Checkbox, List]
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import {NgElement, Component, Template} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic2/config/component-config';
|
||||
|
||||
export let ListConfig = new ComponentConfig('list');
|
||||
|
||||
@Component({
|
||||
selector: 'ion-list'
|
||||
selector: 'ion-list',
|
||||
services: [ListConfig]
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
@@ -10,13 +14,18 @@ import {NgElement, Component, Template} from 'angular2/angular2'
|
||||
</header>
|
||||
<div class="list-content">
|
||||
<content></content>
|
||||
</div>`
|
||||
</div>
|
||||
<footer class="list-footer">
|
||||
<content select="ion-list-footer"></content>
|
||||
</footer>`
|
||||
</footer>
|
||||
`
|
||||
})
|
||||
export class List {
|
||||
constructor(@NgElement() ele:NgElement) {
|
||||
ele.domElement.classList.add('list')
|
||||
constructor(
|
||||
configFactory: ListConfig,
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement;
|
||||
configFactory.create(this);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user