按钮

按钮是与应用程序交互和浏览应用程序的重要方式，并应清楚地说明用户点击后将采取什么行动。按钮可以由文本和/或图标组成，并且可以通过各种属性进行增强。

由于可访问性原因，按钮使用标准的<button>元素，但是使用ion-button指令进行了增强。

有关更多信息，请查看API文档。

基本使用

<button ion-button>Button</button>

color属性设置按钮的颜色。 Ionic 包括许多默认颜色，可以轻松覆盖：

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

效果：

轮廓样式

要使用轮廓样式的按钮，只需添加轮廓属性：

<button ion-button color="light" outline>Light Outline</button>
<button ion-button outline>Primary 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>

效果：

清除样式

要使用清除样式的按钮，只需添加清除属性：

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

效果：

圆角按钮

要创建一个带圆角的按钮，只需添加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 添加到按钮将使按钮占据其父宽度的100％。它还将添加 display: block 到按钮：

<button ion-button block>Block Button</button>

效果：

占满按钮

添加 full 按钮也将使按钮占据其父宽度的100％。但是，它也将删除按钮的左右边框。当按钮伸展到显示屏的整个宽度时，此样式很有用。

<button ion-button full>Full Button</button>

效果：

按钮大小

添加 large 的属性以使按钮更大，或更 small 以使其更小：

<button ion-button small>Small</button>
<button ion-button>Default</button>
<button ion-button large>Large</button>

效果：

图标按钮

要向按钮添加图标，请在其中添加一个图标组件和一个position属性：

<!-- Float the icon left -->
<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>

效果：

组件中的按钮

虽然按钮可以自己使用，但它们可以轻松地在其他组件中使用。例如，可以将按钮添加到列表项或导航栏。

<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-right icon-left>
      <ion-icon name="star"></ion-icon>
      Left Icon
    </button>
  </ion-item>
</ion-list>

效果：

按钮（Buttons）

按钮