Ionic5 Vue中的按钮

Ionic5 Vue3实战视频教程：https://www.itying.com/goods-1150.html

Ionic5 Vue中的按钮 官方文档：https://ionicframework.com/docs/api/button

1、ion-button组件可以定义一个按钮

<ion-button>Default</ion-button>

2、color属性定义按钮的颜色

<ion-button color="primary"> primary </ion-button>
<ion-button color="secondary"> secondary </ion-button>
<ion-button color="tertiary"> tertiary </ion-button>
<ion-button color="success"> success </ion-button>
<ion-button color="warning"> warning </ion-button>
<ion-button color="danger"> danger </ion-button>
<ion-button color="dark"> dark </ion-button>
<ion-button color="medium"> medium </ion-button>
<ion-button color="light"> light </ion-button>

3、expand 设置按钮的宽度

此属性允许您指定按钮的宽度。默认情况下，按钮是内联块，但是设置此属性将按钮更改为全宽度块元素。

<ion-button color="primary" expand="block"> button </ion-button>
	
<ion-button color="primary" expand="full"> button </ion-button>

4、fill设置背景填充

此属性决定按钮的背景和边框颜色。默认情况下，按钮有一个固定的背景，除非按钮位于工具栏内部，如果按钮在工具栏顶部默认情况下面按钮有一个透明的背景。

clear 具有类似于扁平按钮的透明背景的按钮。 outline 具有透明背景和可见边框的按钮。 solid 按钮具有填充的背景。用于工具栏中的按钮。

<ion-button fill="outline">Outline + Round</ion-button>
 <ion-button fill="clear" color="success">
<ion-icon slot="icon-only" :icon="add"></ion-icon>
 </ion-button>

<ion-button fill="solid">
         <ion-icon :icon="star" slot="start"></ion-icon>
         默认效果
 </ion-button>

5、size设置按钮的大小

small 小按钮 default 默认按钮 large 大按钮

6、mode 决定使用哪种平台样式

<ion-button mode='ios' color="primary"> ios平台的按钮 </ion-button>
<ion-button mode='md' color="primary">android平台的按钮 </ion-button>

7、按钮结合图标

<ion-button>
  <ion-icon slot="start" :icon="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon :icon="star" slot="end" />
</ion-button>