/* --- page1.html ---*/

<ion-content padding class="page1">

  <h1>基本用法，实体框</h1>

  <button>默认</button>

  <button light>Light</button>

  <button secondary>Secondary</button>

  <button danger>Danger</button>

  <button dark>Dark</button>

  <br />

  <h1>Outline Style：实线框</h1>

  <button outline>Primary Outline</button>

  <button light outline>Light Outline</button>

  <button secondary outline>Secondary Outline</button>

  <button danger outline>Danger Outline</button>

  <button dark outline>Dark Outline</button>

  <br />

  <h1>Clear Style：消除边框</h1>

  <button clear>Primary Clear</button>

  <button light clear>Light Clear</button>

  <button secondary clear>Secondary Clear</button>

  <button danger clear>Danger Clear</button>

  <button dark clear>Dark Clear</button>

  <br />

  <h1>Round：椭圆框</h1>

  <button light round>Light Round</button>

  <button round>Primary Round</button>

  <button secondary round>Secondary Round</button>

  <button danger round>Danger Round</button>

  <button dark round>Dark Round</button>

</ion-content>

/* --- page1.html ---*/

/* --- page1.html ---*/

<ion-content padding class="page1">

  <h4>在按钮上添加block会使按钮取其父的宽度的100%。</h4>

  <button block>Block Button</button>

  <br />

  <h4>添加 full 按钮也将使按钮取其父的宽度为100%。但是，它也将删除按钮的左，右边框。当按钮应该在显示的整个宽度范围时，该样式是有用的</h4>

  <button full>Full Button</button>

  <br />

  <button small>最小</button>

  <button>默认</button>

  <button large>最大</button>

  <br />

  <button fab>圆形</button>

</ion-content>

/* --- page1.html ---*/

/* -- page1.html --*/

<ion-content padding class="page1">

  <!-- Float the icon left -->

  <button>

    <ion-icon name="home"></ion-icon>

    Left Icon

  </button>

  <!-- Float the icon right -->

  <button>

    Right Icon

    <ion-icon name="home"></ion-icon>

  </button>

  <!-- Only icon (no text) -->

  <button>

    <ion-icon name="home"></ion-icon>

  </button>

</ion-content>

/* -- page1.html --*/

/* -- page1.html --*/

<ion-navbar>

  <ion-buttons start>

    <button>

      <ion-icon name="contact"></ion-icon>

    </button>

  </ion-buttons>

  <ion-buttons end>

    <button>

      <ion-icon name="search"></ion-icon>

    </button>

  </ion-buttons>

</ion-navbar>

<ion-list>

  <ion-item>

    Left Icon Button

    <button outline item-right>

      <ion-icon name="star"></ion-icon>

      Left Icon

    </button>

  </ion-item>

</ion-list>

<h4>虽然按钮可以自己使用，他们可以很容易地在其他组件中使用。例如，按钮可以添加到列表项或导航栏。</h4>

/* -- page1.html --*/