Ionic按钮

Ionic Framework中有几种类型的按钮，这些按钮是微妙的动画，这进一步增强了使用应用程序时的用户体验。所有按钮类型的主要类是 按钮 。这个类将始终应用于我们的按钮，我们将在处理子类时将其用作前缀。

块按钮

块按钮的总容量始终为100％。他们还将使用小填充。您将使用 按钮块 类添加块按钮。如果要删除填充但保留整个宽度，可以使用 按钮完整 类。

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

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

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

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

Ionic按钮

按钮大小

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

  • 按钮小 和

  • 按钮大 。

以下示例显示其用法 -

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

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

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

Ionic按钮

按钮颜色

如果要为按钮设置样式，只需要为其添加适当的颜色类。在为元素设置样式时，需要将主要元素类添加为颜色类的前缀。由于我们正在设置页脚栏的样式，因此前缀类将是一个 栏 ，我们要在此示例中使用的颜色类是 断言的 （红色）。

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

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

Ionic按钮颜色

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

颜色类 描述 结果
button-light 用于白色  
button-stable 用于浅灰色  
button-positive 用于蓝色  
button-calm 用于浅蓝色  
button-balanced 用于绿色  
button-energized 用于黄色  
button-assertive 用于红色  
button-royal 用于紫罗兰色  
button-dark 用于黑色  

按钮大纲

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

要从按钮中删除边框，可以使用 按钮清除 类。以下示例显示如何使用这两个类。

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

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

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

Ionic按钮大纲

添加图标

如果要向按钮添加图标，最好的方法是使用 图标 类。您可以使用 图标左侧 或 图标右侧 将图标放在按钮的一侧。如下所示，当您在按钮顶部有一些文本时，通常需要将图标移到一侧。

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

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

Ionic按钮图标

按钮栏

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

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

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

Ionic按钮栏