1、ionic4.x中的内置颜色
primary secondary tertiary success warning danger dark medium light
颜色只需要记住一个就可以，比如success，因为可以在项目中找到
颜色的使用：直接在标签中加color，输入i-color回车出现下拉提示，可以选择颜色
2、ionic4.x中的按钮组件
1.ion-button组件可以定义一个按钮
<ion-button>Default</ion-button>
输入i-button根据提示回车
routerLink是跳转页面，/后面填跳转位置
输入i-back-button按提示回车输入返回按钮，只能放在ion-toolbar标签中间，
ion-back-button必须在ion-buttons中，slot是位置，start说明在开始位置
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">block</ion-button>//圆角
<ion-button color="primary" expand="full">block</ion-button>//方角
效果图：
4.fill设置背景填充
此属性决定按钮的背景和边框颜色。默认情况下，按钮有一个固定的背景，除非按钮位于工
具栏内部，如果按钮在工具栏顶部默认情况下面按钮有一个透明的背景。
<ion-button fill="outline" expand="block"> </ion-button>
<ion-button fill="solid">
<icon-icon slot="icon-only" name="add"></icon-icon>
</ion-button>
<ion-button fill="clear">
<icon-icon slot="icon-only" name="add"></icon-icon>
</ion-button>/
clear 具有类似于扁平按钮的透明背景的按钮
outline 具有透明背景和可见边框的按钮
solid 按钮具有填充的背景。用于工具栏中的按钮。
5.设置按钮大小
<ion-button size="large">
设置按钮的大小
</ion-button>
<ion-button size="small">
设置按钮的大小
</ion-button>
small 小按钮
default 默认按钮
large 大按钮
6.mode决定使用哪种平台样式
<ion-button mode='ios' color="primary">ios平台的按钮</ion-button>
<ion-button mode='md' color="primary">android平台的按钮</ion-button>
它安装了两套按钮样式，一套是安卓一套是ios，所以可以根据平台自动更改样式
7.按钮结合图标
<ion-button color="primary">
<ion-icon name="add-circle-outline" slot="start"></ion-icon>
left icon
</ion-button>//图标在文字左边
<ion-button color="primary">
right icon
<ion-icon name="add-circle-outline" slot="end"></ion-icon>
</ion-button>//图标在文字右边
</ion-content>
3、ionic中的图标
ionic中文网组件文档：https://ionicons.com/
name 指定图标的名称：<ion-icon name="arrow-dropright-circle"></ion-icon>
slot 指定图标的位置:
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button fill="clear" color="success">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
4、ion-header、ion-footer、ion-content、ion-toobar、icon-title、icon-button、icon-back-button
ionic官方文档：https://ionicframework.com/docs/api/toolbar
ion-header 头部 ion-footer 底部 ion-content 内容
ion-toolbar 主要用于头部和底部，固定在页面顶部或者底部。
ion-title 放在 ion-toolbar 里面指定导航的名称
ion-buttons 按钮组，主要用在 ion-toolbar 中，工具栏中的按钮应该放在 ion-buttons 的内部。
ion-back-button 返回按钮，放在 ion-buttons 里面
ion-buttons 里面的属性
| secondary | 元素在 ios 模式下位于内容左侧，在 md 模式下直接位于内容右侧。 |
|---|---|
| primary | 元素在 ios 模式下位于内容右侧，在 md 模式下位于最右侧 |
| start | 在 LTR 中位于内容的左侧，在 RTL 中位于内容的右侧。 |
| – | – |
| end | 在 LTR 中位于内容的右侧，在 RTL 中位于内容的左侧 |
用法
<ion-toolbar>
<ion-title>Title Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
