Ionic4.x 中的列表UI组件
1、普通列表
<ion-list> <ion-item>
<ion-label>Peperoni</ion-label> </ion-item>
<ion-item>
<ion-label>Hawaii</ion-label> </ion-item>
</ion-list>
如果普通列表加上路由跳转的话列表将会自动加上箭头。
2.分组列表 ion-item-divider
<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>
<ion-item-divider>
<ion-label> Section B </ion-label>
</ion-item-divider>
<ion-item>
<ion-label>B1</ion-label>
</ion-item>
<ion-item>
<ion-label>B2</ion-label>
</ion-item>
<ion-item>
<ion-label>B3</ion-label>
</ion-item>
</ion-list>
列表中带图标
<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-item>
<ion-icon slot="start" name="wallet" color="success"></ion-icon>
<ion-label>钱包</ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
</ion-list>
列表中的头像
<ion-list>
<ion-item>
<ion-avatar>
<img src="assets/01.png">
</ion-avatar>
<ion-label>沃尔玛无人收银系统</ion-label>
</ion-item>
<ion-item>
<ion-avatar>
<img src="assets/02.png">
</ion-avatar>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-avatar>
<img src="assets/03.png">
</ion-avatar>
<ion-label>haha </ion-label>
</ion-item>
</ion-list>
列表中的图片 ion-thumbnail
<ion-list>
<ion-item>
<ion-thumbnail slot="start"> <img
src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"> </ion-thumbnail>
<ion-label>Peperoni</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start"> <img src="assets/03.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="assets/01.png"> </ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="assets/02.png"> </ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end"> <img src="assets/03.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
</ion-list>
6、滑动列表
<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-item-sliding>
<ion-item>
<ion-label>Item2</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option color="success">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 color="success">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
7、ion-item 的属性
https://ionicframework.com/docs/api/item
Ionic4.x 中的列表UI组件的更多相关文章
- android kotlin 子线程中调用界面UI组件崩溃
UI 只能在主线程内更新,子线程需要更新UI组件时可以这样: fun fuck(){ Executors.newSingleThreadExecutor().execute{ // url reque ...
- 把项目中的vant UI组件升级
首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S
- 基于Unity·UGUI实现的RecycleList循环列表UI容器
在UI功能开发实践中,列表UI容器是我们经常使用一种UI容器组件.这种组件就根据输入的数据集合生成对应数据项目.从显示的方向来说,一般就分为水平排布和垂直排布的列表容器两种.列表容器为了在有限的界面空 ...
- Iphone开发基本UI组件
在IOS中的基础UI组件,IPHONE的组件大多以UI开头,这种独树一帜的命名方法极有可能是为了与其他系统的组件进行区分,避免混淆引起冲突: 下面描述一下IOS的基础UI控件以及和Android中的 ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- Angular第三方UI组件库------ionic
一.Angular UI组件库 ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Android UI组件----ListView列表控件详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...
随机推荐
- 美化WebApi,使其统一返回Json格式
博客部分代码来自其他博主,暂时找不到你的博文连接,如果您觉得我的代码中引入了您的代码或者文章,可在下方把您的博客文章写在下面,谢谢!!! WebApi有两种返回数据格式,一种是XML,一种是Json, ...
- github看项目-浏览器插件
浏览器插件,使用浏览器看github项目 原文:浏览 GitHub 太卡了?教你两招!
- Robot Framework--完整的接口测试用例
*** Settings *** Library Collections Library json Library requests Library RequestsLibrary Library H ...
- AJAX学习笔记——jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...
- 22 Jquery 事件
一.概述: 当用户与浏览器进行交互时这些方法被用于注册行为生效, 并进一步处理这些注册行为. 二.绑定事件处理器 .bind() ..unbind():为一个元素绑定一个事件处理程序.3.0版本已经弃 ...
- Mac下mysql出现错误:ERROR 1055 (42000)
问题原因: ONLY_FULL_GROUP_BY的意思是:对于GROUP BY聚合操作,如果在SELECT中的列,没有在GROUP BY中出现,那么这个SQL是不合法的,因为列不在GROUP BY从句 ...
- js的使用及语法
通常,通过 JavaScript,您需要操作 HTML 元素. 1.通过 id 找到 HTML 元素 2.通过标签名找到 HTML 元素 3.通过类名找到 HTML 元素 提示:通过类名查找 HTML ...
- 怎样运行jar包中的文件
1. 2.编辑sysmodule.cmd文件 java -cp sysmodule.jar;classes12.jar;mysql-connector-java-5.0.3-bin.jar;jbcl. ...
- unsigned和signed
int分为unsigned(无正负号)和signed(有正负号) 一般int默认为signed unsigned和unsigned int意思相同
- luogu 2152
SuperGcd 二进制算法 1. A = B, Gcd(A, B) = A; 2. A,B为偶数, Gcd(A, B) = 2 * Gcd(A / 2, B / 2); 3. A 为偶数, B 为 ...