Angular ionic 按钮内置基本样式

参考ionic中文网：http://www.ionic.wang/components_doc-index-id-213.html#expand

效果展示：

html代码：

<ion-content>
  <ion-button color="dark"> 通过color属性改变按钮颜色 </ion-button>

  <ion-button expand="full" color="success">expand设置按钮的样式</ion-button>
  <ion-button expand="block" color="success">expand设置按钮的样式</ion-button>

  <ion-button color="primary" fill="outline"> fill设置背景填充 </ion-button>
  <ion-button color="primary" fill="clear"> fill设置背景填充 </ion-button>

  <ion-button size="small">size设置按钮大小</ion-button>
  <ion-button size="large">size设置按钮大小</ion-button>

  <ion-button mode="ios">mode决定使用那种平台的样式</ion-button>
  <ion-button mode="md">mode决定使用那种平台的样式</ion-button>

  <ion-button>
    <ion-icon slot="start" name="barbell-outline"></ion-icon>
    icon在左，文字在右
  </ion-button>
  <ion-button>
    文字在左，icon在右
    <ion-icon slot="end" name="barbell-outline"></ion-icon>
  </ion-button>

</ion-content>

color：

目录：src/theme/variables.scss  中需要的颜色都可以在此文件中查找

expand：

• full：全宽按钮与方角，没有边框在左或右。
• block：带圆角的全宽按钮。

fill：

• clear：类似于扁平按钮的透明背景按钮；
• outline：具有透明背景和组件边框的按钮；
• solid：按钮具有填充的背景，用于工具栏中的按钮；

size:设置按钮大小

• Small:小按钮
• Default:默认按钮
• Large:大按钮

Mode:决定使用那种平台的样式

• Ios:苹果
• md：安卓

slot：图标所在位置

• Start:图标在前
• end：图标在后