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属性用于指定按钮的大小。它允许我们更改按钮的高度和填充。这些属性主要有三种类型, 我们可以在下表中看到。

例

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

<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应用程序时, 它将提供以下输出。

按钮图示

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

例

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

输出量