Ionic组件之按钮:

效果图:

buttons.png

直接上代码:

buttons.ts

import {Component} from '@angular/core';
@Component({
   templateUrl:'buttons.html'
})
export class Buttons{}

buttons.html

<p><button ion-button>Button</button></p>
<p>
   <button ion-button>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>
</p>
<p>
   <button ion-button outline>Button</button>
   <button ion-button color="light" outline>light</button>
   <button ion-button color="secondary" outline>secondary</button>
   <button ion-button color="danger" outline>danger</button>
   <button ion-button color="dark" outline>Dark</button>
</p>
<p>
   <button ion-button clear>Button</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>
</p>
<p>
   <button ion-button round>Button</button>
   <button ion-button color="light" round>light</button>
   <button ion-button color="secondary" round>secondary</button>
   <button ion-button color="danger" round>danger</button>
   <button ion-button color="dark" round>Dark</button>
</p>
<button ion-button block>Block Button</button>
<button ion-button color="secondary" block round>Block Button</button>
<button ion-button color="danger" full>full button</button>
<p>
   <button ion-button small>small</button>
   <button ion-button>Default</button>
   <button ion-button large>Large</button>
</p>
<p>
   <button ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
   </button>
   <button ion-button icon-right>
       Right Icon
       <ion-icon name="home"></ion-icon>
   </button>
   <button ion-button icon-only>
       <ion-icon name="home"></ion-icon>
   </button>
</p>
<ion-header>
   <ion-navbar>
       <ion-buttons start>
           <button ion-button icon-only>
               <ion-icon name="contact"></ion-icon>
           </button>
       </ion-buttons>
       <ion-buttons end>
           <button ion-button icon-only>
               <ion-icon name="search"></ion-icon>
           </button>
       </ion-buttons>
   </ion-navbar>
</ion-header>
<ion-list>
   <ion-item>
       Left Icon Button
       <button ion-button outline item-end icon-left>
           <ion-icon name="star"></ion-icon>
           Left Icon
       </button>
   </ion-item>
</ion-list>

上一篇:Ionic组件之Badges

下一篇:Ionic组件之Cards