准备工作
官网地址：
http://ionicframework.com/docs/v2/components/#overview
官网为ionic2的学习者准备了Demo,如果事先装好了ionic2环境，仅需以下几个命令：
git clone git@github.com:driftyco/ionic-preview-app.git
cd ionic-preview-app
npm install
ionic serve
Tips：
- mac上如果出现acess相关问题，需在相关操作前加sudo
- 如果在npm install操作停留过久，可考虑使用cnpm
一切顺利的话，就能够看到Demo在浏览器上跑起来了，如图
</br>
正文
ActionSheet
ActionSheet效果图
代码位于<code>ionic-preview-app/app/pages/action-sheets/alerts/basic</code>
openMenu() {
let actionSheet = ActionSheet.create({
title: 'Albums',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Share',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Play',
icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favorite',
icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
this.nav.present(actionSheet);
}
Tips：
- <code>button</code>中的<code>handler</code>处理与应用程序的交互，如果<code>handler</code>返回<code>false</code>，ActionSheet将不会消失。
- <code>role</code>为<code>Cancle</code>的<code>button</code>不管设置在哪个位置都会显示在底部。官方建议<code>role</code>为<code>destructive</code>的按钮最好处在第一个位置。
</br>
Alert
Alert basic
doAlert() {
let alert = Alert.create({
title: 'New Friend!',
message: 'Your friend, Obi wan Kenobi, just approved your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}
</br>
Alert checkbox
doCheckbox() {
let alert = Alert.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
alert.addInput({
type: 'checkbox',
label: 'Coruscant',
value: 'value3'
});
alert.addInput({
type: 'checkbox',
label: 'Endor',
value: 'value4'
});
alert.addInput({
type: 'checkbox',
label: 'Hoth',
value: 'value5'
});
alert.addInput({
type: 'checkbox',
label: 'Jakku',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Naboo',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Takodana',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Tatooine',
value: 'value6'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: data => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
this.nav.present(alert).then(() => {
this.testCheckboxOpen = true;
});
}
</br>
Alert confirm
doConfirm() {
let confirm = Alert.create({
title: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
});
this.nav.present(confirm);
}
</br>
Alert prompt
doPrompt() {
let prompt = Alert.create({
title: 'Login',
message: "Enter a name for this new album you're so keen on adding",
inputs: [
{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
console.log('Saved clicked');
}
}
]
});
this.nav.present(prompt);
}
</br>
Alert redio
doRadio() {
let alert = Alert.create();
alert.setTitle('Lightsaber color');
alert.addInput({
type: 'radio',
label: 'Blue',
value: 'blue',
checked: true
});
alert.addInput({
type: 'radio',
label: 'Green',
value: 'green'
});
alert.addInput({
type: 'radio',
label: 'Red',
value: 'red'
});
alert.addInput({
type: 'radio',
label: 'Yellow',
value: 'yellow'
});
alert.addInput({
type: 'radio',
label: 'Purple',
value: 'purple'
});
alert.addInput({
type: 'radio',
label: 'White',
value: 'white'
});
alert.addInput({
type: 'radio',
label: 'Black',
value: 'black'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Ok',
handler: data => {
console.log('Radio data:', data);
this.testRadioOpen = false;
this.testRadioResult = data;
}
});
this.nav.present(alert).then(() => {
this.testRadioOpen = true;
});
}
Tips：
- <code>input</code>选项：
- type ：input的类型
- placeholder：占位符
- value：checkbox的值
- label：checkbox显示的文字
- checked：是否选中
</br>
Bages
bages 效果图
<ion-item>
<ion-icon name='musical-notes' item-left style="color: #d03e84"></ion-icon>
Albums
<ion-badge item-right>9</ion-badge>
</ion-item>
<ion-item>
<ion-icon name='logo-twitter' item-left style="color: #55acee"></ion-icon>
Followers
<ion-badge item-right>260k</ion-badge>
</ion-item>
Tips：
- bages与上面交互所用方法不同，它更作用于界面的显示，形式也更像是ionic标签，代码也并非位于.ts文件而是.html文件中。
- 通常用于数值的显示。
</br>
Buttons
button basic
Tips：
- <code>button</code>的设置（界面部分）和badges和一样，也是写在.html里，形式如<code><button light>LIGHT</button></code>.
- 如上图，button的颜色属性分别为<code>light</code>,<code>secondary</code>,<code>danger</code>,<code>dark</code>.不写任何属性即为默认<code>default</code>
</br>
button block
Tips：
- <code>block</code>表示一个填充其父容器的小圆角按钮
- 代码格式形如：<code><button light block>LIGHT</button></code>.
</br>
button clear
Tips：
- <code>clear</code>表示一个不带边框的透明按钮。
- 代码格式形如：<code><button light clear>LIGHT</button></code>.
</br>
button in components
Tips：
- 表示在组件中的button，即与其他内容（如text，icon组合起来的button）。
- 格式如下：
<ion-item>
Left Icon Button
<button item-right outline>
<ion-icon name='star'></ion-icon>
Left Icon
</button>
</ion-item>
</br>
button fab
Tips：
- <code>fab</code>表示一个浮动的按钮。
- 代码格式形如：
<button fab secondary fab-top fab-center>
<ion-icon name="compass" is-active="false">
</ion-icon>
</button>
fab-left/fab-right/fab-center/fab-top/fab-bottom
控制浮动按钮的位置
</br>
button full
Tips：
- <code>full</code>表示一个填充其父容器的直角按钮
- 代码格式形如：<code>button light full>Light</button></code>
</br>
button icons
Tips：
- 表示可以和图标组合起来的button
- 代码形如：
<button light>
<ion-icon name='arrow-back'></ion-icon>
Back
</button>
</br>
button outline
Tips：
- <code>outline</code>表示一个带有边框的透明按钮。
- 代码形如：<code><button light outline>Light</button></code>
</br>
button round
Tips：
- <code>round</code>表示一个大圆角的按钮。
- 代码形如：<code><button light round>Light</button></code>
</br>
button size
Tips：
- 代码形如：<code><button light small>Light</button></code>
- 可选属性：<code>small</code>,<code>medium</code>,<code>large</code>
