ionic2 学习笔记

准备工作

官网地址：
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：

1. mac上如果出现acess相关问题，需在相关操作前加sudo
2. 如果在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：

1. <code>button</code>中的<code>handler</code>处理与应用程序的交互，如果<code>handler</code>返回<code>false</code>，ActionSheet将不会消失。
2. <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：

1. <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：

1. bages与上面交互所用方法不同，它更作用于界面的显示，形式也更像是ionic标签，代码也并非位于.ts文件而是.html文件中。
2. 通常用于数值的显示。

</br>

Buttons

button basic
Tips：

1. <code>button</code>的设置（界面部分）和badges和一样，也是写在.html里，形式如<code><button light>LIGHT</button></code>.
2. 如上图，button的颜色属性分别为<code>light</code>,<code>secondary</code>,<code>danger</code>,<code>dark</code>.不写任何属性即为默认<code>default</code>

</br>

button block
Tips：

1. <code>block</code>表示一个填充其父容器的小圆角按钮
2. 代码格式形如：<code><button light block>LIGHT</button></code>.

</br>

button clear
Tips：

1. <code>clear</code>表示一个不带边框的透明按钮。
2. 代码格式形如：<code><button light clear>LIGHT</button></code>.

</br>

button in components
Tips：

1. 表示在组件中的button，即与其他内容（如text，icon组合起来的button）。
2. 格式如下：

<ion-item>
      Left Icon Button
      <button item-right outline>
        <ion-icon name='star'></ion-icon>
        Left Icon
      </button>
    </ion-item>

</br>

button fab
Tips：

1. <code>fab</code>表示一个浮动的按钮。
2. 代码格式形如：

<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：

1. <code>full</code>表示一个填充其父容器的直角按钮
2. 代码格式形如：<code>button light full>Light</button></code>

</br>

button icons
Tips：

1. 表示可以和图标组合起来的button
2. 代码形如：

<button light>
      <ion-icon name='arrow-back'></ion-icon>
      Back
</button>

</br>

button outline
Tips：

1. <code>outline</code>表示一个带有边框的透明按钮。
2. 代码形如：<code><button light outline>Light</button></code>

</br>

button round
Tips：

1. <code>round</code>表示一个大圆角的按钮。
2. 代码形如：<code><button light round>Light</button></code>

</br>

button size
Tips：

1. 代码形如：<code><button light small>Light</button></code>
2. 可选属性：<code>small</code>,<code>medium</code>,<code>large</code>