Ionic 按钮

ionic 框架包含几种类型的按钮。这些按钮是与应用程序交互和导航的关键方式。它也应该用来清楚地传达当用户点击它们时会发生什么操作。它可以在表单中使用，或者在任何需要简单、标准按钮功能的地方使用。按钮可以包含两样东西，即文本、图标或两者都有。它还可以通过各种属性进行增强，以显示特定的外观。我们可以使用标准 <ion-button> </ion-button> 元素访问按钮。

以下列出了按钮属性的不同样式。

• 默认
• 展开
• 填充
• 形状
• 大小
• 图标

默认

这是按钮的基本用法。默认样式的语法是

您可以使用 color 属性设置按钮的颜色。Ionic 包含几种默认颜色，这些颜色可以轻松地被覆盖。例如，

展开

此属性用于指定按钮的宽度。默认情况下，按钮是内联块。但是，通过设置这些属性，我们可以将按钮更改为全宽块元素。我们可以将其分为两种类型

1. 块按钮

块按钮将始终使按钮占据其父容器的 100% 宽度，并带有圆角。

2. 全宽按钮

全宽按钮也将使按钮占据其父容器的 100% 宽度。它还移除了按钮的左右边框。当按钮需要横跨整个显示宽度时，全宽按钮样式很有用。

填充

它确定按钮的背景和边框颜色。默认情况下，按钮具有纯色背景。我们可以将这些属性分为以下类型。

Clear

它用于制作具有透明背景的按钮，类似于扁平按钮。您可以通过在按钮中添加 clear 属性来实现，如下所示

概述

它用于制作具有透明背景和可见边框的按钮。您可以通过在按钮中添加 outline 属性来实现，如下所示

固态

它用于制作具有填充背景的按钮。它对工具栏中的按钮很有用。您可以通过在按钮中添加 solid 属性来实现，如下所示

圆形按钮

它用于创建带有圆角的按钮。您可以通过在按钮中添加 round 属性来实现，如下所示

示例

在下面的示例中，我们可以清楚地理解所有类型的按钮属性的用法。

Button.html

Button.ts

输出

当我们在终端窗口中执行此 Ionic 应用程序时，它会给出以下输出。

按钮大小

size 属性用于指定按钮的大小。它允许我们更改按钮的高度和内边距。这些属性主要有三种类型，我们可以在下表中看到。

示例

在下面的示例中，我们可以清楚地理解所有按钮大小之间的差异。

输出

当我们在终端窗口中执行此 Ionic 应用程序时，它会给出以下输出。

按钮图标

如果要向按钮添加图标，需要在按钮内添加一个 icon 组件。您还可以使用 slot 属性设置图标在按钮内的位置。 slot 属性在下表中给出。

示例

输出