ionic4学习笔记7--UI组件1(没实践，直接摘抄)

1、 Ionic4.x 内置颜色

<ion-button color="primary"> primary </ion-button>
<ion-button color="secondary"> secondary </ion-button>

primary secondary tertiary success warning danger dark medium light
2、 Ionic4.x 中的按钮
官方文档： 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 expand="full" fill="outline">Outline + Full</ion-button>
<ion-button fill="clear" color="success">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid" (click)="goBack()">
<ion-icon name="ios-arrow-back" 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" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

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-toolbar 、 ion-title 、 ion-buttons 、
ion-back-button
官方文档： https://ionicframework.com/docs/api/toolbar
ion-header 头部， ion-content 内容， ion-footer 底部
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>