javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

radio group

Browse Source
This commit is contained in:
Adam Bradley
2015-03-29 23:08:34 -05:00
parent d61f083896
commit b88f6e37d9
4 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/radio/radio-button.js
View File

@ -0,0 +1,37 @@
import {NgElement, Component, Template} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config';
export let RadioConfig = new ComponentConfig('radio');
@Component({
selector: 'ion-radio',
services: [RadioConfig]
})
@Template({
inline: `
<div class="item-content">
<div class="item-title">
<content></content>
</div>
<div class="item-media media-radio">
<icon class="radio-off"></icon>
<icon class="ion-ios-checkmark-empty radio-on"></icon>
</div>
</div>
`
})
export class RadioButton {
constructor(
configFactory: RadioConfig,
element: NgElement
) {
this.domElement = element.domElement
this.domElement.classList.add('item')
this.domElement.setAttribute('aria-checked', true)
configFactory.create(this)
}
}

33
src/components/radio/radio-group.js
View File

@ -0,0 +1,33 @@
import {NgElement, Component, Template} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config';
export let RadioConfig = new ComponentConfig('radio');
@Component({
selector: 'ion-radio-group',
services: [RadioConfig]
})
@Template({
inline: `
<header class="list-header">
<content select="ion-list-header"></content>
</header>
<div class="list-content radio-group radio-group-ios">
<content></content>
</div>
<footer class="list-footer">
<content select="ion-list-footer"></content>
</footer>
`
})
export class RadioGroup {
constructor(
configFactory: RadioConfig,
element: NgElement
) {
this.domElement = element.domElement
this.domElement.classList.add('list')
this.domElement.classList.add('list-ios')
configFactory.create(this)
}
}

64
src/components/radio/test/basic/main.html
View File

@ -5,68 +5,24 @@
<div class="content" style="background: #efeff4">
<div class="list list-ios">
<ion-radio-group>
<div class="list-header">
<ion-list-header>
Radio Group
</div>
</ion-list-header>
<div class="list-content radio-group radio-group-ios"
role="radiogroup"
aria-activedescendant="radio_1"
aria-invalid="false">
<ion-radio>
Star Wars
</ion-radio>
<div class="item radio"
role="radio"
id="radio_1"
value="Apple"
aria-checked="true"
aria-label="Star Wars">
<ion-radio>
Star Trek
</ion-radio>
<div class="item-content">
<div class="item-title">
Star Wars
</div>
<div class="item-media media-radio">
<icon class="radio-off"></icon>
<icon class="ion-ios-checkmark-empty radio-on"></icon>
</div>
</div>
</div>
<div class="item radio"
role="radio"
id="radio_2"
value="Banana"
aria-checked="false"
aria-label="Star Trek">
<div class="item-content">
<div class="item-title">
Star Trek
</div>
<div class="item-media media-radio">
<icon class="radio-off"></icon>
<icon class="ion-ios-checkmark-empty radio-on"></icon>
</div>
</div>
</div>
</div>
</div>
</ion-radio-group>
</div>
</div>
</div>

6
src/components/radio/test/basic/main.js
View File

@ -2,11 +2,15 @@ import {bootstrap} from 'angular2/core';
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 {RadioGroup} from 'ionic2/components/radio/radio-group';
import {RadioButton} from 'ionic2/components/radio/radio-button';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Content]
directives: [View, Content, RadioGroup, RadioButton]
})
class IonicApp {
constructor() {