1.Button 按钮概述

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

出于可访问性的原因，按钮使用标准<button>元素，但通过ion-button指令进行了增强。

2.用法

2.1 Default Style 默认样式

button ion-button>Button

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

LightDefaultSecondaryDangerDark

2.2 Outline Style 轮廓样式

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

Light OutlinePrimary OutlineSecondary OutlineDanger OutlineDark Outline

2.3 Clear Style 纯文本按钮样式

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

Light ClearPrimary ClearSecondary ClearDanger ClearDark Clear

2.4 Round Buttons 圆角按钮

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

Light RoundPrimary RoundSecondary RoundDanger RoundDark Round

2.5 Block Buttons 块按钮

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

Block Button

2.6 Full Buttons 全按钮

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

Full Button

2.7 Button Sizes 按钮大小

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

SmallDefaultLarge

2.8 Icon Buttons 图标按钮

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

      
       Left Icon
      Right Icon  
     
      
     

2.9 Buttons In Components 组件中的按钮

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

      
         
            
               
                  
          
            
               
                  
        
     
    
      
     
          Left Icon Button    
            
             Left Icon      
     
    

3.Buttoon API文档

[ion-button]

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

3.1用法

    DefaultSecondaryDangerLightDark
    Full ButtonBlock ButtonRound Button
    Outline + FullOutline + BlockOutline + Round
      
       Left Icon  Right Icon  
       
     
    LargeDefaultSmall

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 高级用法

      Danger (Solid)
      Secondary (Round)
      Primary (Clear)
      Dark (Solid + Round)
      Click me!

@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	圆形按钮的边框半径