ionic4.x 学习笔记（二）—— Ionic4.x 中的 UI 组件

本文链接：https://blog.csdn.net/Lyrelion/article/details/109282818

目录

1.Ionic4.x 内置颜色

2.Ionic4.x 中的按钮

3.Ionic4.x 中的图标

4.Ionic4.x 中的常见组件

5.Ionic4.x 中的列表

6.Ionic4.x 中的表单

7.Ionic4.x 中的 Slides 轮播图

8.Ionic4.x 中的 Searchbar 搜索组件、Segment tab 切换组件

9.Ionic4.x 中的日期组件

10.Ionic4.x 中的侧边栏组件结合底部 tabs

11.Ionic4.x 中的 Theming（主题）

1.Ionic4.x 内置颜色

primary secondary tertiary success warning danger dark medium light
<ion-button color="primary"> primary </ion-button>
<ion-button color="secondary"> secondary </ion-button>

2.Ionic4.x 中的按钮 <ion-button>

按钮自定义颜色：<ion-button color="primary"> primary </ion-button>
默认按钮是内联块，但设置 expand 属性（设置宽度），按钮会变为块元素

<ion-button color="primary" expand="block"> button </ion-button>
<ion-button color="primary" expand="full"> button </ion-button>

fill 属性（设置背景及边框色），默认按钮有固定背景，除非按钮位于工具栏内部（透明背景）

clear：透明背景按钮
outline：透明背景 + 边框可见按钮
solid：有填充色的按钮

size（设置按钮的大小）：small（小按钮）、default（默认按钮）、large(大按钮)

mode（使用哪种平台样式）

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

带图标的按钮：<ion-button> + <ion-icon>

3.Ionic4.x 中的图标 <ion-icon>

name 指定图标名称
slot 指定图标位置：icon-only（按钮内容仅有图标没有文字）、start、end
<ion-button fill="clear/outline/full" color="success">
<ion-icon slot="icon-only/start/end" name="add"></ion-icon>
</ion-button

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button> 
    </ion-buttons>
    <ion-title>按钮组件演示</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-button color="dark"> 通过color属性修改按钮的颜色 </ion-button>
    <ion-button color="primary" expand="block"> expand 设置按钮的宽度    </ion-button>
    <ion-button color="primary" expand="full"> expand 设置按钮的宽度    </ion-button>
    <ion-button fill="outline" expand="block"> fill 设置背景填充 </ion-button>

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

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

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

   <ion-button color="primary" href="">
     <ion-icon name="add-circle-outline" slot="start"></ion-icon>
     图片在左侧文字在右侧按钮
   </ion-button>

   <ion-button color="primary" href=""> 
     图片在右侧文字在左侧的按钮
     <ion-icon name="add-circle-outline" slot="end"></ion-icon>
   </ion-button>

   <ion-button color="primary" href="">      
      <ion-icon name="add" slot="start"></ion-icon> 增加
    </ion-button>
    <ion-icon name="settings" color="success" class="myicon"></ion-icon>

    <ion-button  fill="clear">
       <ion-icon name="checkbox-outline" slot="icon-only"></ion-icon>
    </ion-button>
</ion-content>

4.Ionic4.x 中的常见组件

ion-header 头部、ion-content 内容、ion-footer 底部
ion-toolbar 用于头部和底部，固定导航栏
ion-title 放在ion-toolbar 导航名称
ion-buttons 按钮组，用在 ion-toolbar 工具栏中
ion-back-button 返回按钮，放在 ion-buttons 里面

返回按钮返回指定地址 defaultHref：<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
ion-buttons 按钮组里的属性：

secondary：元素在 ios 模式下位于内容左侧，在 md 模式下位于内容右侧
primary：元素在 ios 模式下位于内容右侧，在 md 模式下位于最右
start：元素在 LTR 中位于内容左侧，在 RTL 中位于内容右侧
end：元素在 LTR 中位于内容右侧，在 RTL 中位于内容左侧

5.Ionic4.x 中的列表

<ion-item> 属性：https://ionicframework.com/docs/api/item
小技巧：<ion-list>上的 lines=“full” 下划线顶格显示

<ion-list lines="full">
    <ion-item *ngFor="let item of list" [routerLink]="['/button']">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>

5.1 普通列表 <ion-list> + <ion-item><ion-label>

<ion-list>
    <ion-item>
        <ion-label>Peperoni</ion-label>
    </ion-item>
</ion-list>

普通列表加上路由跳转，列表将会自动加上箭头：

5.2 分组列表 <ion-list> + <ion-item-divider> + <ion-item><ion-label>

<ion-list>
    <ion-item-divider>
        <ion-label>
            Section A
        </ion-label>
    </ion-item-divider>
    <ion-item><ion-label>A1</ion-label></ion-item>
    <ion-item><ion-label>A2</ion-label></ion-item>
    <ion-item><ion-label>A3</ion-label></ion-item>

5.3 列表中的图标 <ion-list> + <ion-item> + <ion-icon> + <ion-label>

<ion-list>
<ion-item>
    <ion-icon slot="start" name="people"></ion-icon>
    <ion-label>个人中心</ion-label>
    <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
</ion-list>

5.4 列表中的头像 <ion-avatar><img>

<ion-list>
  <ion-item>
    <ion-avatar>
      <img src="assets/01.png">
    </ion-avatar>
    <ion-label>沃尔玛无人收银系统</ion-label>
  </ion-item>
</ion-list>

5.5 列表中的图片 <ion-thumbnail><img>

<ion-list>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="https://gravatar.com/avatar......">
    </ion-thumbnail>
    <ion-label>Peperoni</ion-label>
  </ion-item>
</ion-list>

5.6 滑动列表 <ion-item-sliding> <ion-item-options>

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item1</ion-label>
    </ion-item>
    <ion-item-options side="start">
      <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
      <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
    </ion-item-options>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

补充：<ion-item> 的属性 —— https://ionicframework.com/docs/api/item
<ion-list> 上的 lines=“full” 下划线顶格显示

<ion-list lines="full">
    <ion-item *ngFor="let item of list" [routerLink]="['/button']">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>

6.Ionic4.x 中的表单

输入框 input，<ion-item> 包裹一个 <ion-label> 和一个 <ion-input>
单选框 radio，<ion-radio-group> 上绑定数据，包裹多个 <ion-item>，<ion-item> 再包裹 <ion-label> 和 <ion-radio>
复选框 checkbox，遍历数组，<ion-item> 包裹 <ion-label> 和 <ion-checkbox>，在 <ion-checkbox> 上绑定数据
下拉框 seletct， <ion-select> 包裹一个 <ion-select-option>
<ion-textarea> 简化版输入框

6.1 ion-input 单行文本框
<ion-list>
    <ion-item>
        <ion-label>用户名:</ion-label>
        <ion-input [(ngModel)]="peopleInfo.username"></ion-input>
    </ion-item>
</ion-list>
6.2 ion-toggle 开关
<ion-item>
    <ion-label>是否吃早餐</ion-label>
    <ion-toggle slot="end" [(ngModel)]="peopleInfo.falg"></ion-toggle>
</ion-item>
6.3 ion-radio-group、ion-radio 单选按钮组
<ion-list>
    <ion-radio-group [(ngModel)]="peopleInfo.payType">
        <ion-item>
            <ion-avatar slot="start">
                <img src="assets/alipay.png">
            </ion-avatar>
            <ion-label>支付宝</ion-label>
            <ion-radio value='1' slot="end"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-avatar slot="start">
                <img src="assets/weixinpay.png">
            </ion-avatar>
            <ion-label>微信</ion-label>
            <ion-radio value='2' slot="end"></ion-radio>
        </ion-item>
    </ion-radio-group>
</ion-list>
6.4 ion-checkbox 多选按钮组
<ion-list>
    <ion-item *ngFor="let item of peopleInfo.checkBoxList">
        <ion-label>{{item.val}}</ion-label>
        <ion-checkbox slot="start" [(ngModel)]="item.isChecked"></ion-checkbox>
    </ion-item>
</ion-list>
6.5 ion-select 选择框
<ion-list>
    <ion-select slot="end" [(ngModel)]="peopleInfo.city">
        <ion-select-option *ngFor="let item of peopleInfo.cityList" [value]="item">{{item}}</ion-select-option>
    </ion-select>
</ion-list>
6.6 ion-textarea 多行文本框
<ion-list>
    <ion-item>
        <ion-textarea [(ngModel)]="peopleInfo.info"></ion-textarea>
    </ion-item>
</ion-list>

7.Ionic4.x 中的 Slides 轮播图

Ionic4.x 中的轮播图组件是基于swiper 插件，所以配置 slides 属性需要在 swiper 的 api 中找
Swiper Api：http://idangero.us/swiper/api/

7.1 配置slides 的属性
export class SlidesPage implements OnInit {
    slideOpts = {
        effect: 'flip',
        speed: 400,
        loop:true,
        autoplay: {
            delay: 2000
       }};
}
7.2 <ion-slide> 实现轮播图
<ion-slides pager="true" [options]="slideOpts">
    <ion-slide>
        <h1>Slide 1 </h1>
    </ion-slide>
    // ...
    <ion-slide>
        <h1>Slide 10 </h1>
    </ion-slide>
</ion-slides>
7.3 调用方法实现轮播

获取 slide 对象：

定义名称 #slide：<ion-slides pager="true" #slide>......
引入ViewChild，获取 slide 对象：

import { Component, OnInit, ViewChild } from '@angular/core';
@ViewChild('slide') slide;
触发事件，调用 slide 的方法：doSlide() { this.slide.slideNext(); }

7.4 ionSlideTouchEnd 事件

手动滑动后，轮播图不自动轮播的解决方法：添加 ionSlideTouchEnd 事件
<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd) = "slideDidChange()"> ......
slideDidChange() { this.slide1.startAutoplay(); }

8.Ionic4.x 中的 Searchbar 搜索组件、Segment tab 切换组件

8.1 Searchbar 搜索组件：用于搜索框

https://ionicframework.com/docs/api/searchbar

<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<ion-searchbar placeholder="Filter" animated showCancelButton cancelButtonText="取消"></ion-searchbar>
<ion-searchbar placeholder="Filter" animated></ion-searchbar>
<ion-searchbar placeholder="Filter" animated color="primary"></ion-searchbar>
<ion-searchbar debounce="500" (ionChange)="searchBarChange()"></ion-searchbar>

8.2 Segment 自定义tab 切换组件：用于 tab 切换

https://ionicframework.com/docs/api/segment
注意：ngSwichCase的写法，带引号，把tabs绑定到[ngSwitch]上

<ion-segment [(ngModel)]="tabs" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="plist">
        商品列表
    </ion-segment-button>
    <ion-segment-button value="pcontent">
        商品详情
    </ion-segment-button>
</ion-segment>
<div [ngSwitch]="tabs">
    <div class="con1" *ngSwitchCase="'plist'">
        商品图文信息
    </div>
    <div class="con2" *ngSwitchCase="'pcontent'">
        商品详情
    </div>
</div>

9.Ionic4.x 中的日期组件

注意，去掉案例上的 return false，否则时间控件不取消显示

// 组件基本使用模板：
<ion-datetime display-format="YYYY-MM-DD" [(ngModel)]="day"></ion-datetime>
<ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY"></ion-datetime>
// 组件基本使用业务逻辑：
import sd from 'silly-datetime';
constructor() {
	this.day = sd.format(new Date(), 'YYYY-MM-DD');
}
——————————————————————————————————————————————————————————————————————————————————
// 自定义组件的 options 模板：
<ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" ></ion-datetime>
// 自定义组件的 options 业务逻辑：
public customPickerOptions = {
        buttons: [{
            text: '取消',
            handler: () => console.log('Clicked Save!')
        }, {
            text: '保存',
            handler: () => {
                console.log('Clicked Log. Do not Dismiss.');
            }}]
}

10.Ionic4.x 中的侧边栏组件结合底部 tabs

10.1 侧边栏 <ion-menu> 组件的基本使用

创建项目：ionic start myApp sidemenu
配置：

属性作用可选值
side 配置侧边栏的位置 start end
menuId 侧边栏的唯一标识
type 配置侧边栏的弹出方式 overlay, reveal, push
swipe-gesture 滑动弹出侧边栏 true false
<ion-menu side="start" menuId="first">
    <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-menu-toggle auto-hide="false">
                <ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item>
            </ion-menu-toggle>
            <ion-menu-toggle auto-hide="false">
                <ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item>
            </ion-menu-toggle>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
10.2 侧边栏 <ion-menu> 组件的事件和方法

用 js 控制侧边栏步骤：

给 <ion-menu> 定义 menuId 属性：<ion-menu side="start" menuId="first"></ion-menu>
控制菜单的页面中引入代码：import { MenuController } from '@ionic/angular';
初始化构造函数：constructor( private menu: MenuController) { }
对应方法中，通过 js 控制侧边栏：doOpenMenu() { this.menu.open('first'); }

10.3 侧边栏 <ion-menu> 组件的一些小点

<ion-menu-toggle>：点击后，侧边栏消失
<ion-menu-button>：<ion-menu-button menu="end1" 中的 menu，对应 app 上定义的 menuId
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button> </ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>

    <ion-buttons slot="end">
      <ion-menu-button menu="end1"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
10.4 侧边栏 <ion-menu> 组件结合底部 tabs

app.component.html 中加入下面代码：
<ion-app>
    <ion-menu swipe-gesture=true type="overlay" menuId="first" >
        <ion-header>
            <ion-toolbar>
                <ion-title>菜单</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false">
                    // 默认侧边栏点击链接是内容区从右到左显示
                    // 加上[routerDirection]="‘root’" ，直接显示，没有动画了
                    <ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item>
                </ion-menu-toggle>
            </ion-list>
        </ion-content>
    </ion-menu>
    // 拉不出来侧边栏，在app.moudle.ts上加个main：
    <ion-router-outlet main></ion-router-outlet>
</ion-app>
注意：
拉不出来侧边栏，在 app.moudle.ts 上加个 main：<ion-router-outlet main></ion-router-outlet>
默认侧边栏点击链接，内容区从右到左显示，加上 [routerDirection]="‘root’" ，直接显示，没有动画了
<ion-menu-toggle>
<ion-item [routerDirection]="'root'" [routerLink]="['/news']">
<ion-label>我的新闻</ion-label>
</ion-item>
</ion-menu-toggle>

属性	作用	可选值
side	配置侧边栏的位置	start end
menuId	侧边栏的唯一标识
type	配置侧边栏的弹出方式	overlay, reveal, push
swipe-gesture	滑动弹出侧边栏	true false

11.Ionic4.x 中的 Theming（主题）

Ionic4.x 中修改主题颜色：需要在 src/theme/variables.scss 中修改
其他的修改也是：主要对 variable.scss 的修改，或在自己组件的样式中，微调某个页面元素
contrast 对比色：比如底部 tabs 的颜色是 #69bb7b，则里面按钮的颜色是 #fff

11.1 增加内置主题颜色

Ionic4.x 增加内置主题颜色：找到 src/theme/variables.scss，新增 favorite 颜色，设置如下：
.ion-color-favorite {
    --ion-color-base: #69bb7b;
    --ion-color-base-rgb: 105,187,123;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255,255,255;
    --ion-color-shade: #5ca56c;
    --ion-color-tint: #78c288;
}
用法：<ion-button color="favorite"> 自定义颜色 </ion-button>

11.2 修改内置组件默认样式

官方文档：https://ionicframework.com/docs/api/button
ionic4.x 组件中，有 CSS Custom Properties，可以通过它来修改 ionic4.x 内置组件的默认样式
找到 src/theme/variables.scss，修改 ion-button 的默认样式：
ion-button {
    --color: #222;
    --background:red;
}
11.3 修改底部 Tabs 背景及按钮颜色
<ion-tabs>
    <ion-tab-bar slot="bottom" color="favorite">
        <ion-tab-button tab="tab1">
            <ion-icon name="flash"></ion-icon>
            <ion-label>Tab One</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab2">
            <ion-icon name="apps"></ion-icon>
            <ion-label>Tab Two</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>
——————————————————————————————————————————————————————————————————
.ion-color-favorite {
  --ion-color-base: #69bb7b; // 背景颜色
  --ion-color-base-rgb: 105,187,123;
  --ion-color-contrast: #ffffff;// c参照颜色，就是不选中的时候的颜色
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #5ca56c;
  --ion-color-tint: #78c288;
}