Ionic - 按钮

---

---

Ionic 框架中有多种类型的按钮，这些按钮都带有微妙的动画效果，这在使用应用程序时进一步增强了用户体验。所有按钮类型的主要类是button。此类将始终应用于我们的按钮，并且在使用子类时，我们将使用它作为前缀。

块级按钮

块级按钮始终具有其父容器的 100% 宽度。它们还会应用少量填充。您将使用button-block类来添加块级按钮。如果您想删除填充但保留完整宽度，可以使用button-full类。

以下是一个示例，展示了这两个类的用法：

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

以上代码将生成以下屏幕：

按钮大小

有两种 Ionic 类可用于更改按钮大小：

• button-small 和

• button-large.

以下是一个示例，展示了它们的用法：

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

以上代码将生成以下屏幕：

按钮颜色

如果要设置按钮的样式，只需向其添加相应的颜色类即可。当您设置元素的样式时，需要将主元素类作为前缀添加到颜色类。由于我们正在设置页脚栏的样式，因此前缀类将是bar，而我们在此示例中要使用的颜色类是assertive（红色）。

<button class = "button button-assertive">
   button-assertive
</button>

以上代码将生成以下屏幕：

您可以使用以下九个类中的任何一个，为您的应用程序按钮提供您选择的颜色：

按钮轮廓

如果希望按钮透明，可以应用button-outline类。具有此类的按钮将具有轮廓边框和透明背景。

要删除按钮的边框，可以使用button-clear类。以下示例演示了如何使用这两个类。

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

以上代码将生成以下屏幕：

添加图标

当您想要向按钮添加图标时，最佳方法是使用icon类。您可以使用icon-left或icon-right将图标放置在按钮的一侧。当您在按钮顶部有一些文本时，通常希望将图标移动到一侧，如下所述。

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

以上代码将生成以下屏幕：

按钮栏

如果要将几个按钮组合在一起，可以使用button-bar类。默认情况下，按钮将具有相同的大小。

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div> 

以上代码将生成以下屏幕：