参考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:图标在后