标签：button ion 按钮 组件 ionic toolbar 图标
这里写目录标题
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导航
我们在头部可以添加一个返回按钮，且返回按钮的文字为“返回”
标签：button,ion,按钮,组件,ionic,toolbar,图标 来源： https://blog.csdn.net/u010574271/article/details/115269498
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。