准备工作
官网地址：
http://ionicframework.com/docs/v2/components/#overview
官网为ionic2的学习者准备了Demo,如果事先装好了ionic2环境，仅需以下几个命令：
git clone [email protected]:driftyco/ionic-preview-app.git
cd ionic-preview-app
npm install
ionic serve
Tips：
- mac上如果出现acess相关问题，需在相关操作前加sudo
- 如果在npm install操作停留过久，可考虑使用cnpm
一切顺利的话，就能够看到Demo在浏览器上跑起来了，如图
正文
ActionSheet
ActionSheet效果图
代码位于ionic-preview-app/app/pages/action-sheets/alerts/basic
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：
button中的handler处理与应用程序的交互，如果handler返回false，ActionSheet将不会消失。role为Cancle的button不管设置在哪个位置都会显示在底部。官方建议role为destructive的按钮最好处在第一个位置。
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);
}
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;
});
}
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);
}
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);
}
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：
input选项：- type ：input的类型
- placeholder：占位符
- value：checkbox的值
- label：checkbox显示的文字
- checked：是否选中
Bages
bages 效果图
9
260k
Tips：
- bages与上面交互所用方法不同，它更作用于界面的显示，形式也更像是ionic标签，代码也并非位于.ts文件而是.html文件中。
- 通常用于数值的显示。
Buttons
button basic
Tips：
button的设置（界面部分）和badges和一样，也是写在.html里，形式如.- 如上图，button的颜色属性分别为
light,secondary,danger,dark.不写任何属性即为默认default
button block
Tips：
block表示一个填充其父容器的小圆角按钮- 代码格式形如：
.
button clear
Tips：
clear表示一个不带边框的透明按钮。- 代码格式形如：
.
button in components
Tips：
- 表示在组件中的button，即与其他内容（如text，icon组合起来的button）。
- 格式如下：
Left Icon Button
button fab
Tips：
fab表示一个浮动的按钮。- 代码格式形如：
fab-left/fab-right/fab-center/fab-top/fab-bottom
控制浮动按钮的位置
button full
Tips：
full表示一个填充其父容器的直角按钮- 代码格式形如：
button light full>Light
button icons
Tips：
- 表示可以和图标组合起来的button
- 代码形如：
button outline
Tips：
outline表示一个带有边框的透明按钮。- 代码形如：
button round
Tips：
round表示一个大圆角的按钮。- 代码形如：
button size
Tips：
- 代码形如：
- 可选属性：
small,medium,large