ionic4学习笔记7--UI组件1(没实践，直接摘抄)
1、 Ionic4.x 内置颜色
primary
secondary primary secondary tertiary success warning danger dark medium light
2、 Ionic4.x 中的按钮
官方文档： https://ionicframework.com/docs/api/button
1、 ion-button 组件可以定义一个按钮
Default
2、 color 属性定义按钮的颜色
primary
secondary
tertiary
success
warning
danger
dark
medium
light
3、 expand 设置按钮的宽度
此属性允许您指定按钮的宽度。 默认情况下， 按钮是内联块， 但是设置此属性将按钮更改为
全宽度块元素。
button
button
4、 fill 设置背景填充
此属性决定按钮的背景和边框颜色。 默认情况下， 按钮有一个固定的背景， 除非按钮位于工
具栏内部， 如果按钮在工具栏顶部默认情况下面按钮有一个透明的背景。
| clear | 具有类似于扁平按钮的透明背景的按钮。 |
| outline | 具有透明背景和可见边框的按钮。 |
| solid | 按钮具有填充的背景。用于工具栏中的按钮。 |
Outline + Full
5、 size 设置按钮的大小
| small | 小按钮 |
| default | 默认按钮 |
| large | 大按钮 |
6、 mode 决定使用哪种平台样式
ios 平台的按钮
android 平台的按钮
7、 按钮结合图标
Right Icon
3、 ionic 中的图标
ionic 图标官网： https://ionicons.com/
name 指定图标的名称：
slot 指定图标的位置:
Right Icon
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 中位于内容的左侧。 |
用法：
Title Only
Back Button
Default Buttons
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！