ionic 按钮、导航等组件的使用

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导航


我们在头部可以添加一个返回按钮，且返回按钮的文字为“返回”