这里写目录标题
ionic5中内置颜色
介绍
首先介绍下ionic 5 内置颜色 可用在按钮、图标、导航等
这些颜色的配置是在src\theme\variables.scss下
使用
在src\app\tab2\tab2.page.html下，我们新建一个按钮，配置其color="success"如下：
最后在页面上表现的形式如下：
按钮
首先我们新建一个button页面
ionic g page button
我们可以使用i4-button新建按钮
这个是ionic4-snippets-vscode中的，如果没有我们可以先安装该组件
接下来我们就可以在按钮组件中使用相应的属性
expand设置按钮的宽度
这个属性中，block为圆角 full为直角
当expand=“block”
效果如下：
当expand=“full”
效果如下：
fill设置背景填充
此属性决定按钮的背景和边框颜色
clear 具有类似于扁平按钮的透明背景按钮
outline 具有透明背景和可见边框的按钮
solid 按钮具有填充的背景，用于工具栏中的按钮
该功能可用于常用语图标显示中
size设置按钮的大小
small 小按钮
default 默认按钮
large 大按钮
mode 决定使用哪种平台样式
按钮结合图标
我们新建一个图标在左边的按钮可以用i-button-icon-left
我们新建一个图标在右边的按钮可以用i-button-icon-right
导航组件
简介
ionic 中有一些其他的布局以及导航类组件如下
- ion-header:头部
- ion-footer：底部
- ion-content：内容
- ion-toolbar：主要用于头部和底部，固定在页面顶部或者底部
- ion-title：放在ion-toolbar里面指定导航的名称
- ion-buttons：按钮组，主要用在ion-toolbar中，工具栏中的按钮应该放在ion-buttons的内部
- ion-back-button：返回按钮，放在ion-buttons里面
使用
首先我们新建一些toolbar页面
ionic g page toolbar
在这个页面默认是没有尾部的，我们用ionic-新建了一个尾部，头部和尾部都可以添加一个ion-toolbar导航
我们在头部可以添加一个返回按钮，且返回按钮的文字为“返回”