準備工作
官網(wǎng)地址：
http://ionicframework.com/docs/v2/components/#overview
官網(wǎng)為ionic2的學習者準備了Demo,如果事先裝好了ionic2環(huán)境武翎，僅需以下幾個命令：
git clone git@github.com:driftyco/ionic-preview-app.git
cd ionic-preview-app
npm install
ionic serve
Tips：
- mac上如果出現(xiàn)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文件中奖蔓。
- 通常用于數(shù)值的顯示赞草。
</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>
