离子 - 按钮

---

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

块按钮

块按钮将始终具有其父容器的 100% 宽度。他们还将应用一个小填充物。您将使用按钮块类来添加块按钮。如果您想删除填充但保持完整宽度，您可以使用button-full类。

以下是显示这两个类的用法的示例 -

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

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

上面的代码将产生以下屏幕 -

按钮尺寸

有两个 Ionic 类用于更改按钮大小 -

• 按钮小和

• 按钮大。

以下是展示其用法的示例 -

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

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

上面的代码将产生以下屏幕 -

按钮颜色

如果您想设计按钮的样式，只需为其添加适当的颜色类即可。当您设计元素的样式时，您需要将主元素类添加为颜色类的前缀。由于我们正在设计页脚栏的样式，因此前缀类将是一个栏，并且我们要在本示例中使用的颜色类是自信的（红色）。

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

上面的代码将产生以下屏幕 -

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

按钮轮廓

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

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

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

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

上面的代码将产生以下屏幕 -

添加图标

当您想向按钮添加图标时，最好的方法是使用图标类。您可以使用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>

上面的代码将产生以下屏幕 -

按钮栏

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

<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> 

上面的代码将产生以下屏幕 -