1.Button 按钮概述

按钮是与应用程序进行交互和导航的基本方式，并且应该清楚地告知用户点击后会发生什么操作。按钮可以由文本或图标组成，或者文本图标一起组成，并且可以用各种属性进行增强。

出于可访问性的原因，按钮使用标准

该color属性设置按钮的颜色。ionic包括许多默认的颜色，可以很容易地被覆盖：

2.2 Outline Style 轮廓样式 Demo 源代码

要使用按钮的轮廓样式，只需添加outline属性：

2.3 Clear Style 纯文本按钮样式 Demo 源代码

要使用按钮的清除样式，只需添加clear属性：

2.4 Round Buttons 圆角按钮 Demo 源代码

要创建一个圆角的按钮，只需添加round属性：

2.5 Block Buttons 块按钮 Demo 源代码

添加block到按钮将使按钮占据其父宽度的100％。它也将添加display: block到按钮：

2.6 Full Buttons 全按钮 Demo 源代码

添加full到按钮也会使按钮占据其父宽度的100％。但是，它也会删除按钮的左右边框。当按钮应该在整个显示宽度上延伸时，此样式非常有用。

2.7 Button Sizes 按钮大小 Demo 源代码

添加large属性以增大按钮或small使其更小：

2.8 Icon Buttons 图标按钮 Demo 源代码

要将图标添加到按钮，请在其中添加一个图标组件和一个位置属性：

2.9 Buttons In Components 组件中的按钮 Demo 源代码

尽管按钮可以单独使用，但它们可以很容易地在其他组件中使用。例如，可以将按钮添加到列表项目或导航栏中。


  
    
      
    

    
      
    
  



  
    Left Icon Button

3.Buttoon API文档

[ion-button]
按钮是Ionic中的简单组件。它们可以由文本和图标组成，并通过各种属性进行增强。

3.1用法

3.2 Input Properties 输入属性

Attr	Type	Details
block	boolean	如果为true，则激活填充可用宽度的按钮样式。
clear	boolean	如果为true，则激活不带边框的透明按钮样式。
color	string	从Sass $colors地图使用的颜色。默认选项为："primary"，"secondary"，"danger"，"light"，和"dark"。有关更多信息，请参阅Theming Your App。
default	boolean	如果为true，则激活默认按钮大小。通常是默认值，对项目中的按钮有用。
full	boolean	如果为true，则激活一种按钮样式，该样式填充可用宽度而不需要左右边框。
large	boolean	如果为true，则激活大按钮。
mode	string	该模式确定使用哪种平台样式。可能的值有："ios"，"md"，或"wp"。有关更多信息，请参阅平台样式。
outline	boolean	如果为true，则激活带有边框的透明按钮样式。
round	boolean	如果为true，则激活带圆角的按钮。
small	boolean	如果为true，则激活小按钮。
solid	boolean	如果为true，则激活坚实的按钮样式。通常是默认的，对工具栏中的按钮很有用。
strong	boolean	如果为true，则激活字体重量较大的按钮。

3.2 IAdvanced 高级用法

@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  isDanger: boolean = true;
  isSecondary: boolean = false;
  isRound: boolean = true;
  isOutline: boolean = false;
  isClear: boolean = true;
  myColor: string = 'secondary';
  myColor2: string = 'dark';

  logEvent(event) {
    console.log(event)
  }
}

3.3 Sass Variables 变量

All

Property	Default	Description
$button-round-padding-top	0	圆形按钮的顶部内边距
$button-round-padding-end	2.6rem	圆形按钮的结束内边距
$button-round-padding-bottom	$button-round-padding-top	圆形按钮的底部内边距
$button-round-padding-start	$button-round-padding-end	圆形按钮开始内边距
$button-round-border-radius	64px	圆形按钮的边框半径

ionic3 UI Components学习4：Button 按钮