1、ionic4.x中的内置颜色

primary secondary tertiary success warning danger dark medium light
颜色只需要记住一个就可以，比如success，因为可以在项目中找到

颜色的使用：直接在标签中加color，输入i-color回车出现下拉提示，可以选择颜色

2、ionic4.x中的按钮组件

1.ion-button组件可以定义一个按钮

<ion-button>Default</ion-button>

输入i-button根据提示回车

routerLink是跳转页面，/后面填跳转位置

输入i-back-button按提示回车输入返回按钮，只能放在ion-toolbar标签中间，
ion-back-button必须在ion-buttons中，slot是位置，start说明在开始位置

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">block</ion-button>//圆角
  <ion-button color="primary" expand="full">block</ion-button>//方角

效果图：

4.fill设置背景填充

此属性决定按钮的背景和边框颜色。默认情况下，按钮有一个固定的背景，除非按钮位于工
具栏内部，如果按钮在工具栏顶部默认情况下面按钮有一个透明的背景。

<ion-button fill="outline" expand="block">  </ion-button>

  <ion-button fill="solid"> 
    <icon-icon  slot="icon-only" name="add"></icon-icon>
  </ion-button>
  
  <ion-button fill="clear"> 
    <icon-icon  slot="icon-only" name="add"></icon-icon>
  </ion-button>/
  

clear 具有类似于扁平按钮的透明背景的按钮
outline 具有透明背景和可见边框的按钮
solid 按钮具有填充的背景。用于工具栏中的按钮。

5.设置按钮大小

<ion-button size="large">
    设置按钮的大小
  </ion-button>
  <ion-button size="small">
    设置按钮的大小
  </ion-button>

small 小按钮
default 默认按钮
large 大按钮

6.mode决定使用哪种平台样式

<ion-button mode='ios' color="primary">ios平台的按钮</ion-button>
 <ion-button mode='md' color="primary">android平台的按钮</ion-button>

它安装了两套按钮样式，一套是安卓一套是ios，所以可以根据平台自动更改样式

7.按钮结合图标

<ion-button color="primary">
    <ion-icon name="add-circle-outline" slot="start"></ion-icon>
    left icon
  </ion-button>//图标在文字左边
  <ion-button color="primary">
    right icon
    <ion-icon name="add-circle-outline" slot="end"></ion-icon>
  </ion-button>//图标在文字右边
</ion-content>

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-toobar、icon-title、icon-button、icon-back-button

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

• 点赞
• 收藏
• 分享
• • 文章举报

black_strong 发布了9 篇原创文章 · 获赞 0 · 访问量 930 私信 关注

标签：ionic4,button,buttons,ion,UI,按钮,toolbar,图标
来源： https://blog.csdn.net/black_strong/article/details/104405555