3.组件(一)

May 22, 2018

https://ionicframework.com/docs/components/

离子应用程序由称为组件的高级构建块组成。组件允许您快速构建应用程序的界面。 Ionic配备了许多组件，包括模块，弹出窗口和卡片。查看下面的示例，了解每个组件的外观，并了解如何使用每个组件。熟悉基础知识后，请前往API文档，了解如何自定义每个组件。

按钮点击触发:

  <!--block为占满整个宽度-->
  <button ion-button block (click)="showAction()">
    Show Action Sheet
  </button>

Action Sheets

let actionSheet = this.actionSheetCtrl.create(
 {
   title:'this is a action sheet',
   buttons:[
     {
       text: 'Destructive', //红色
       role: 'destructive',
       handler: () => {
         console.log('Destructive clicked');
       }
     },{
       text: 'Archive',  //蓝色
       handler: () => {
         console.log('Archive clicked');
       }
     },{
       text: 'Cancel',
       role: 'cancel', //取消
       handler: () => {
         console.log('Cancel clicked');
         }
     }
   ]
 }
);
actionSheet.present();

Alert

alert-base

let alert = this.alertCtrl.create({
        title:"alertView",
        subTitle:"hello my friends",
        buttons:[
          'yes',
          {
          text: 'no',  //蓝色
          handler: () => {
            console.log('`no` button click');
          }
        }]
    });
    alert.present()

alert-prompt 可以指定inputs

let prompt = this.alertCtrl.create({

 title:'login',
 message:'this is message',
 inputs:[
   {
     name:'title',
     placeholder:'Title'
   }
 ],
 buttons:[
   {
     text: 'Cancel',
     handler: data => {
       console.log('Cancel clicked');
     }
   },
   {
     text: 'Save',
     handler: data => {
       console.log('Saved clicked' + data.title );
     }
   }
 ]
});
prompt.present();

alert-radio 单选

//单选
let alert = this.alertCtrl.create();
    alert.setTitle("this is alert title");
    alert.addInput({
      type:'radio',
      label:'Blue',
      value:'blue',
      checked:true
    }) ;
    alert.addInput({
      type:'radio',
      label:'Red',
      value:'red',
      checked:false
    }) ;


    alert.addButton('cancel')
    alert.addButton({
      text:'OK',
      handler:data => {

      }
    })

    alert.present()

alert-Checkbox 多选

 let alert = this.alertCtrl.create();
    alert.setTitle("this is checkbox")
    alert.addInput({
      type:'checkbox',
      label:'value1',
      value:'value1',
      checked:true
    });
    alert.addInput({
      type:'checkbox',
      label:'value2',
      value:'value2',
      checked:true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text:'Okay',
      handler:data => {
        console.log(data); //Array
      }
    });
    alert.present()

badge 角标

角标,意义指定颜色:

<ion-badge color="secondary"></ion-badge>

举例

<ion-item>
  <ion-icon name="logo-twitter" item-start></ion-icon>
  Followers
  <ion-badge item-end>260k</ion-badge>
</ion-item

显示效果非常美观:

button

Default/Outline/Clear/Round

Default 浏览器默认显示安卓风格，iOS设备默认是扁平风格

  <!--最基本的使用，可以修改颜色风格-->
  <button ion-button>按钮默认样式，宽度自适应</button>
  <button ion-button color="light">light</button>
  <button ion-button color="secondary">secondary</button>
  <button ion-button color="danger">danger</button>
  <button ion-button color="dark">dark</button> <hr>

Outline 字体颜色与outline的颜色相同

  <button ion-button outline>默认outline button</button>
  <button ion-button color="light" outline>light outline</button>
  <button ion-button color="secondary" outline>secondary outline</button>
  <button ion-button color="danger" outline>danger outline</button>
  <button ion-button color="dark" outline>dark outline</button> <hr>

clear 无背景色和边框颜色

  <button ion-button clear>clear default</button>
  <button ion-button color="light" clear>light</button>
  <button ion-button color="secondary" clear>secondary</button>
  <button ion-button color="danger" clear>danger</button>
  <button ion-button color="dark" clear>dark</button> <hr>

Round 圆角

  <button ion-button color="light" round>Light Round</button>
  <button ion-button round>Primary Round</button>
  <button ion-button color="secondary" round>Secondary Round</button>
  <button ion-button color="danger" round>Danger Round</button>
  <button ion-button color="dark" round>Dark Round</button>

Block/Full

block: 宽度和父视图相同 full: 类似block,但是会删除左右 borders,视图在整个显示宽度上延伸时，此样式非常有用

  <p>block</p>
 <button ion-button block>Block Button</button>
 <p>full</p>
 <button ion-button full>Full Button</button>

button size

可以通过small、large控制button的大小

  <button ion-button small>small</button>
  <button ion-button >default</button>
  <button ion-button large>large</button>

icon buttons

配合ion-icon显示icon

 <p>icon button</p>

  <button ion-button icon-left>
    <ion-icon name="home"></ion-icon>
    Left Icon
  </button>

  <!-- Float the icon right -->
  <button ion-button icon-right>
    Right Icon
    <ion-icon name="home"></ion-icon>
  </button>
  <!-- Only icon (no text) -->
  <button ion-button icon-only>
    <ion-icon name="home"></ion-icon>
  </button>
  <p>
    <button ion-button color="light" icon-start>
      <ion-icon name='arrow-back'></ion-icon>
      Back
    </button>

    <button ion-button color="light" icon-only>
      <ion-icon name='arrow-down'></ion-icon>
    </button>

    <button ion-button color="light" icon-only>
      <ion-icon name='arrow-up'></ion-icon>
    </button>

    <button ion-button color="light" icon-end>
      Next
      <ion-icon name='arrow-forward'></ion-icon>
    </button>
  </p>

  <p>
    <button ion-button icon-start>
      <ion-icon name='home'></ion-icon>
      Home
    </button>
    <button ion-button outline icon-start>
      <ion-icon name='briefcase' is-active="false"></ion-icon>
      Work
    </button>
    <button ion-button clear icon-start>
      <ion-icon name='beer' is-active="false"></ion-icon>
      Pub
    </button>
  </p>

  <p>
    <button ion-button color="secondary" icon-start>
      <ion-icon name='people'></ion-icon>
      Friends
    </button>
    <button ion-button color="secondary" outline icon-start>
      <ion-icon name='paw' is-active="false"></ion-icon>
      Best Friend
    </button>
  </p>

  <p>
    <button ion-button color="danger" icon-start>
      <ion-icon name='close'></ion-icon>
      Remove
    </button>
    <button ion-button color="danger" outline icon-only>
      <ion-icon name='remove-circle' is-active="false"></ion-icon>
    </button>
    <button ion-button color="danger" clear icon-only>
      <ion-icon name='trash' is-active="false"></ion-icon>
    </button>
  </p>

  <p>
    <button ion-button color="dark" round icon-start>
      <ion-icon name='construct' is-active="false"></ion-icon>
      Tools
    </button>
    <button ion-button color="dark" clear icon-only>
      <ion-icon name='hammer' is-active="false"></ion-icon>
    </button>
  </p>

buttons In Components

尽管按钮可以单独使用，但它们可以很容易地在其他组件中使用。例如，可以将按钮添加到列表项目或导航栏中。

nav上使用

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>


    <!--默认为 `start`左侧； 可以改成右侧`end`-->
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>


  </ion-navbar>
</ion-header>

list中使用（以居右显示为例）

  <ion-list>
    <ion-item>
      Left Icon Button
      <!--item-end 将button置于 icon-item的最右端-->
      <button ion-button outline item-end icon-left>
        <ion-icon name="star"> </ion-icon> left icon
      </button>
    </ion-item>
  </ion-list>

Cards

卡片是展示重要内容的绝佳方式，并且正迅速成为应用程序的核心设计模式。它们是遏制和组织信息的好方法，同时也为用户设定了可预测的期望。有了这么多的内容可以立即显示，而且屏幕的显示空间非常小，卡片很快就成为许多公司的首选设计模式，包括Google，Twitter和Spotify等。

对于移动体验，卡片可以轻松地在多种不同的屏幕尺寸下直观地显示相同的信息。他们允许更多的控制，灵活性，甚至可以动画。卡通常被放置在另一个之上，但它们也可以像“页面”一样使用，并在左右之间滑动。

基本用法

就像普通页面一样，可以对卡片定义标题。要将卡头添加到卡上，使用<ion-card-header>

<ion-card>
    <ion-card-header>
      星期二
    </ion-card-header>
    <ion-card-content>
       今天天气不错，风和日丽的
    </ion-card-content>
  </ion-card>

Lists In Cards

card可以嵌套list-item。此时，使用ion-list替代ion-card-content

  <ion-card>
    <ion-card-header>我的TODO列表</ion-card-header>

    <ion-list>
      <button ion-item>
        <ion-icon name="cart" item-start></ion-icon>
        购物
      </button>
      <button ion-item>
        <ion-icon name="cafe" item-start></ion-icon>
        休闲
      </button>
    </ion-list>
  </ion-card>

image In Cards

图片大小各不相同，因此在整个应用中采用一致的样式非常重要。图像可以很容易地添加到卡片上。将图像添加到卡上会使图像具有固定的宽度和可变的高度。
Lists，headers和其他card组件可以轻松地与图像卡结合使用。

 <ion-card>
    <img src="assets/imgs/nin-live.png" alt="">
    <ion-card-content>
      <ion-card-title>
        Nine Inch Nails Live
      </ion-card-title>
      <p>
        The most popular industrial group ever, and largely
        responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>
  </ion-card>

复杂一点的:

  <ion-card>

    <img src="assets/imgs/nin-live.png"/>

    <ion-card-content>
      <ion-card-title>
        Nine Inch Nails Live
      </ion-card-title>
      <p>
        The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>

    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small color="danger" icon-start>
          <ion-icon name='star'></ion-icon>
          Favorite
        </button>
      </ion-col>
      <ion-col text-center>
        <button ion-button clear small color="danger" icon-start>
          <ion-icon name='musical-notes'></ion-icon>
          Listen
        </button>
      </ion-col>
      <ion-col text-right>
        <button ion-button clear small color="danger" icon-start>
          <ion-icon name='share-alt'></ion-icon>
          Share
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

Background Images

卡可以用来实现多种设计。我们提供许多元素来实现通用设计，但有时需要添加自定义样式。将背景图像添加到卡片中是添加自定义样式可以实现完全不同外观的绝佳示例。

<style>

    .card-background-page ion-card {
      position: relative;
      text-align: center;
    }

    .card-background-page .card-title {
      position: absolute;
      top: 36%;
      font-size: 2.0em;
      width: 100%;
      font-weight: bold;
      color: #fff;
    }

    .card-background-page .card-subtitle {
      font-size: 1.0em;
      position: absolute;
      top: 52%;
      width: 100%;
      color: #fff;
    }

  </style>

  <div class="card-background-page">

  <ion-card>
    <img src="assets/imgs/card-saopaolo.png" alt="">
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">72 Listings</div>
  </ion-card>

    <ion-card>
      <img src="assets/imgs/card-madison.png"/>
      <div class="card-title">Madison</div>
      <div class="card-subtitle">28 Listings</div>
    </ion-card>
  </div>

高级使用

来自不同类型卡片的样式可以组合起来创建高级卡片。卡片也可以使用自定义CSS。以下是一些通过将各种卡片属性与少量自定义CSS组合在一起而构建的高级卡片。

  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/marty-avatar.png">
      </ion-avatar>
      <h2>Marty McFly</h2>
      <p>November 5, 1955</p>
    </ion-item>

    <img src="assets/imgs/advance-card-bttf.png">

    <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="thumbs-up"></ion-icon>
          <div>12 Likes</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="text"></ion-icon>
          <div>4 Comments</div>
        </button>
      </ion-col>
      <ion-col center text-center>
        <ion-note>
          11h ago
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>

Checkbox

复选框与HTML复选框输入没有区别。但是，像其他Ionic组件一样，复选框的样式在每个平台上都是不同的。使用checked属性设置默认值，使用disabled属性禁用用户更改该值

<ion-item>
    <ion-label>this is a ion-lable</ion-label>
    <ion-checkbox></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>this is a ion-lable</ion-label>
    <ion-checkbox color="dark" [checked]="true"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>this is a ion-lable</ion-label>
    <ion-checkbox color="secondary"  disabled="" [checked]="true"></ion-checkbox>
  </ion-item>

DateTime

DateTime组件用于显示一个界面，使用户可以轻松选择日期和时间。DateTime组件类似于本地的元素<input type="datetime-local>，但是，Ionic的DateTime组件可以很容易地以首选格式（preferred format）显示日期和时间，并管理日期时间值。

<ion-item>
    <ion-label>Start Time</ion-label>
    <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" ></ion-datetime>
  </ion-item>

FAB

浮动按钮,并且可以点击展开。

  <p>Floating Action Buttons</p>

    <ion-fab top left edge>
      <button ion-fab mini><ion-icon name="add"></ion-icon></button>
      <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-fab-list>
    </ion-fab>