Ionic - 按钮

Ionic Framework 中有几种类型的按钮，这些按钮带有细微的动画效果，进一步提升了使用应用时的用户体验。所有按钮类型的主要 class 是 button。这个 class 将始终应用于我们的按钮，我们在处理子 class 时会将其作为前缀。

块级按钮

块级按钮始终具有父容器的 100% 宽度。它们还会有小的 padding。如果要添加块级按钮，请使用 button-block class。如果想移除 padding 但保留全宽，可以使用 button-full class。

以下示例展示了这两个 class 的用法 —

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

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

上述代码将生成以下屏幕 —

按钮尺寸

Ionic 有两个 class 用于更改按钮尺寸 —

• button-small 和

• button-large。

以下示例展示了它们的用法 —

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

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

上述代码将生成以下屏幕 —

按钮颜色

如果要为按钮设置样式，只需为其添加相应的颜色 class。在为元素设置样式时，需要将主要元素 class 作为前缀添加到颜色 class 前。由于我们正在为底部栏设置样式，前缀 class 将是 bar，本示例中要使用的颜色 class 是 assertive（红色）。

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

上述代码将生成以下屏幕 —

您可以使用以下九个 class 中的任意一个，为应用按钮添加所需的颜色 —

按钮描边

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

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

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

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

上述代码将生成以下屏幕 —

添加图标

当要为按钮添加图标时，最好的方法是使用 icon class。您可以通过 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> 

上面的代码将生成以下屏幕 −