8、列表:ion-list
/* ---示例代码----*/ <ion-content> <ion-list no-lines>
<ion-item>no-lines</ion-item>
<ion-item>no-lines</ion-item>
<ion-item>no-lines</ion-item>
</ion-list> <ion-list>
<ion-item>default</ion-item>
<ion-item>default</ion-item>
<ion-item>default</ion-item>
</ion-list> <ion-list inset>
<ion-item>inset</ion-item>
<ion-item>inset</ion-item>
<ion-item>inset</ion-item>
</ion-list> </ion-content> /* ---示例代码----*/
2、电话簿样式
当要把 列表进行分组的时候 请使用 <
ion-item-group
>
而不是
使用<
ion-list
> 。
来划分多个部分。 他如同一个电话簿。
<
ion-item-group
>
/* ---示例代码----*/ <ion-content> <ion-item-group> <ion-item-divider light>A</ion-item-divider>
<ion-item>Angola</ion-item>
<ion-item>Argentina</ion-item> <ion-item-divider light>B</ion-item-divider>
<ion-item>Beijing</ion-item> </ion-item-group> </ion-content> /* ---示例代码----*/
每一个列表都可以带有一个 列表的头部用来显示信息。他就是 <
ion-list-header
>
/* ---示例代码----*/ <ion-content> <ion-list>
<ion-list-header>
Action
</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>The Empire Strikes Back</ion-item>
<ion-item>Blade Runner</ion-item>
</ion-list> </ion-content> /* ---示例代码----*/
图标的位置 可以用 item-left 和 item-right 进行控制。
/* ---示例代码----*/ <ion-list> <ion-item>
<ion-icon name="leaf" item-left></ion-icon>
Herbology
<ion-icon name="rose" item-right></ion-icon>
</ion-item> </ion-list> /* ---示例代码----*/
<
ion-thumbnail
>
组件。使用该项目的 item-left、item-right 属性设置缩略图的位置:/* ---示例代码----*/ <ion-list> <ion-item>
<ion-thumbnail item-left>
<img src="img/1.jpg">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button clear item-right>View</button>
</ion-item> </ion-list> /* ---示例代码----*/
ion-avatar 比图标大 。比缩略图小 所以适合做头像 。当多个标题或段落标记被添加到<ion-item>时,该 item 将自动调整其高度以适应新的行。
/* ---示例代码----*/ <ion-list> <ion-item>
<ion-avatar item-left>
<img src="img/1.jpg">
</ion-avatar>
<h2>Cher</h2>
<p>Ugh. As if.</p>
</ion-item> </ion-list> /* ---示例代码----*/
7、滑动项目 ion-item-sliding
/* ---示例代码----*/ <ion-list> <ion-item-sliding>
<ion-item>
<ion-avatar item-left>
<img src="img/1.jpg">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options>
<button primary>
<ion-icon name="text"></ion-icon>
Text
</button>
<button secondary>
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
</ion-item-sliding> </ion-list> /* ---示例代码----*/
8、列表:ion-list的更多相关文章
- metronic后台模板学习 -- 所用外部插件列表
插件名称 描述 URL jQuery 1.11.0 js库,不用介绍了 http://www.jquery.com jQuery Migrate plugin 1.2.1 jQuery 老版本过渡迁移 ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- SD-WAN供应商列表
SD-WAN的一个重要思想是,可以使用任何类型的多个物理WAN链路来承载流量,而无需网络工程师进行大量工程设计.相反,SD-WAN解决方案在物理基础设施之上运行覆盖(隧道),抽象出实际链接. SD-W ...
- ionic 2 起航 控件的使用 客户列表场景(二)
首先放出我hithub项目代码例子,有兴趣研究探讨的同学可以去看看 https://github.com/linyuebin2016/ionic2.git 下面我们来尝试下第一个项目场景 一份客户的列 ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- ASP.NET Aries 入门开发教程3:开发一个列表页面及操控查询区
前言: Aries框架毕竟是开发框架,所以重点还是要写代码的,这样开发人员才不会失业,哈. 步骤1:新建html 建一个Html,主要有三步: 1:引入Aries.Loader.js 2:弄一个tab ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 散列表(hash table)——算法导论(13)
1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...
随机推荐
- List_Delete
/*Sorting from little to large use List*/ #include <stdio.h> /* printf, scanf, NULL */ #includ ...
- Markdown使用样例
# 欢迎使用 Cmd - 在线 Markdown 编辑阅读器 ------ 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,**Cmd Markdown** 是 ...
- 【bzoj2437】[Noi2011]兔兔与蛋蛋 二分图最大匹配+博弈论
Description Input 输入的第一行包含两个正整数 n.m. 接下来 n行描述初始棋盘.其中第i 行包含 m个字符,每个字符都是大写英文字母"X".大写英文字母&quo ...
- python模块-hmac
Hmac算法:Keyed-Hashing for Message Authentication.它通过一个标准算法,在计算哈希的过程中,把key混入计算过程中. import timefrom has ...
- (转)2-SAT小结
2-sat小结 原文作者:老K 原文传送门 2-sat是什么 一类问题是这样的: (两个符号的意思 \(\lor \ or,\land \ and\)) 有n个布尔变量,现在对它们做出限制,比如\(a ...
- JS中Math函数的常用方法
Math 是数学函数,但又属于对象数据类型 typeof Math => ‘object’ console.dir(Math) 查看Math的所有函数方法. 1,Math.abs() 获取绝对值 ...
- 文件句柄NSFileHandle
//一.读取 //1.以只读方式打开 NSFileHandle *fh = [NSFileHandle fileHandleForReadingAtPath:txtPath]; //2.读取所有内容 ...
- PHP 实时生成并下载超大数据量的 Excel 文件
//另外由于excel数据是从数据库里逐步读出然后写入输出流的所以需要将PHP的执行时间设长一点 //(默认30秒)set_time_limit(0)不对PHP执行时间做限制. set_time_li ...
- PHP请求远程地址设置超时时间
file_get_contents 请求超时设置 $timeout = array( 'http'=> array( 'timeout'=>5//设置一个超时时间,单位为秒 ) ); $c ...
- HLS-搭建Nginx流媒体服务器
Nginx本身是一个非常出色的HTTP服务器,FFMPEG是非常好的音视频解决方案.这两个东西通过一个nginx的模块nginx-rtmp-module,组合在一起即可以搭建一个功能相对比较完善的流媒 ...