Ionic按钮 _Ionic按钮

Ionic框架包含几种类型的按钮。这些按钮是与应用程序交互和浏览的一种基本方式。它还应用于清楚地传达用户单击它们时将发生的操作。它可以以表格形式使用, 也可以在需要简单, 标准按钮功能的任何地方使用。这些按钮可以包含两个内容, 即文本, 图标或两者。还可以通过各种属性来增强它, 以使其具有特定的外观。我们可以使用标准的< ion-button> < / ion-button> 元素来访问按钮。
下面列出了按钮属性的不同样式。

默认
扩大
填
形状
尺寸
图标

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

< ion-button> Default Button< /ion-button>

你可以使用color属性设置按钮的颜色。 Ionic包括几种可以轻松覆盖的默认颜色。例如,

< ion-button color="light"> Light Button< /ion-button>

扩大
此属性用于指定按钮的宽度。默认情况下, 按钮是嵌入式块。但是, 通过设置这些属性, 我们可以将按钮更改为全角块元素。我们可以将其分为两种类型：
1.阻止按钮
阻止按钮将始终使按钮占据其父容器带有圆角的100％宽度。

< ion-button expand="block"> Block Button< /ion-button>

2.全按钮
完整按钮还将使该按钮占据其父容器的100％宽度。它还会删除按钮的左右边框。当按钮需要在显示屏的整个宽度上伸展时, “全按钮”样式很有用。

< ion-button expand="full" > Full Button< /ion-button>

填
它确定按钮的背景和边框颜色。默认情况下, 按钮为纯色背景。我们可以将这些属性分为以下几种类型。
明确
它用于使按钮具有透明背景, 类似于平面按钮。你可以通过在按钮中添加clear属性来做到这一点, 如下所示：

< ion-button expand="full"fill="clear"> Full Button< /ion-button>

大纲
它用于使按钮具有透明背景和可见边框。你可以通过在按钮中添加outline属性来做到这一点, 如下所示：

< ion-button expand="full"fill="outline"> Full Button< /ion-button>

固体
用于制作背景填充的按钮。对于工具栏中的按钮很有用。你可以通过在按钮中添加solid属性来做到这一点, 如下所示：

< ion-button expand="full" fill="solid" > Full Button< /ion-button>

圆形按钮
它用于创建带有圆角的按钮。你可以通过在按钮中添加round属性来做到这一点, 如下所示：

< ion-button shape="round" > Round Button< /ion-button>

例
在下面的示例中, 我们可以清楚地了解所有类型的按钮属性的用法。
Button.html

< ion-header> < ion-toolbar> < ion-title> Buttons Example< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < !-- Default --> < ion-button> Default< /ion-button> < !-- Expand --> < ion-button expand="full" color="primary"> Full Button< /ion-button> < ion-button expand="block" color="secondary"> Block Button< /ion-button> < !-- Round --> < ion-button shape="round" color="warning"> Round Button< /ion-button> < !-- Fill --> < ion-button expand="full" fill="outline" color="success"> Outline Button< /ion-button> < ion-button expand="block" fill="clear" color="danger"> Clear Button< /ion-button> < /ion-content>

按钮

import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: button.html', styleUrls: [button.scss'], }) export class HomePage {}

输出量
当我们在终端窗口中执行此Ionic应用程序时, 它将提供以下输出。

文章图片
按键尺寸
size属性用于指定按钮的大小。它允许我们更改按钮的高度和填充。这些属性主要有三种类型, 我们可以在下表中看到。

序号	尺寸	描述
1.	Default	它指定按钮的默认高度和填充。这对于项目中的按钮很有用。
2.	Small	它创建具有较少高度和填充的按钮。
3.	Large	它创建具有更多高度和填充的按钮。

【Ionic按钮】例
在下面的示例中, 我们可以清楚地了解所有按钮大小之间的差异。

< ion-header> < ion-toolbar> < ion-title> Buttons Example< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < !-- Sizes --> < div> < /div> < div> < ion-button size="large" color="secondary"> Large< /ion-button> < /div> < div> < ion-button> Default< /ion-button> < /div> < div> < ion-button size="small" color="danger"> Small< /ion-button> < /div> < /ion-content>

输出量
当我们在终端窗口中执行此Ionic应用程序时, 它将提供以下输出。

文章图片
按钮图示
如果要向按钮添加图标, 则需要在按钮内部添加图标组件。你还可以通过使用插槽属性来设置图标在按钮内的位置。插槽属性在下表中给出。

序号	插槽属性	描述
1.	End	它将内容放置在按钮文本的右侧。
2.	Start	它将内容放在按钮文本的左侧。
3.	Icon only	当按钮没有文本时使用。

例

< ion-header> < ion-toolbar> < ion-title> Buttons Icons < /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < !-- Icons --> < div> < ion-button> < ion-icon slot="start" name="star" color="success"> < /ion-icon> Left Icon < /ion-button> < /div> < div> < ion-button> Right Icon < ion-icon slot="end" name="star" color="secondary"> < /ion-icon> < /ion-button> < /div> < div> < ion-button> < ion-icon slot="icon-only" name="star" color="warning"> < /ion-icon> < /ion-button> < /div> < /ion-content>

输出量