ionic入门之色彩、图标和边距和界面组件:列表
色彩
ionic定义了九种前景/背景/边框的色彩样式,:
可以在任何元素上使用这些样式设置前景和背景颜色:
- <any class="positive-bg energized">
- ...
- </any>
图标
ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式,有超过500个图标可供选择。
使用图标很简单,在元素上声明以下两个CSS类即可:
- .icon - 将元素声明为图标
- .ion-{icon-name} - 声明要使用的具体图标
通常使用i元素定义图标,例如下面声明了元素显示ion-home图标:
- <i class="icon ion-home"></i>
要了解有哪些图标及具体名称,需要访问ionics.com。 点击某个图标即可查看其CSS类名称。
可以在任何元素中插入图标,使用元素的font-size样式指定图标的大小:
- <any style="font-size:100px;">
- <i class="icon ion-search"></i>
- </any>
内边距
ionic定义了常用的内边距样式:
样式名很直白,边距统一为10px。可以在任何元素上应用这些样式。
列表 : .list
列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器, 使用.item定义列表成员:
- <any class="list">
- <any class="item">...</any>
- <any class="item">...</any>
- <any class="item">...</any>
- <any class="item">...</any>
- </any>
对列表外观的定制化主要集中在.item元素上,.list元素仅有 少数的几个样式定义:
成员容器 : .item
列表的样式定制主要发生在.item元素上。在.item元素内, 可以插入文本、徽章、图标、图像(头像、缩略图或大图)、按钮等各种 样式的元素:
.item : 嵌入文本
列表成员中经常需要显示不同规格的文本,比如今日头条的新闻列表:
.item元素可以使用h1~h6/p标签插入不同规格的文本。
.item : 嵌入图标
列表成员的内容中插入图标,比单纯的文字更加生动:
要插入图标,需要满足两个条件:
- 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧, 分别使用.item-icon-left和.item-icon-right声明
- 在.item元素内插入图标。
.item : 嵌入头像
很多社交App中,一个相当固定的UI模式是包含用户头像的信息列表:
在ionic中,头像被设置为40x40固定大小。和插入图标类似,向.item 中插入头像需要满足两个条件:
- 在.item元素上声明头像位置。头像可以位于列表的左侧或右侧, 分别使用.item-avatar-left和.item-avatar-right声明
- 在.item元素内使用img标签插入头像。
.item : 嵌入缩略图
回到今日头条的新闻列表,我们给它加上两张新闻图片:
在ionic中,缩略图被定义为80px大小,比头像大,适合新闻图片。 和插入头像类似,向.item中插入缩略图需要满足两个条件:
- 在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧, 分别使用.item-thumbnail-left和.item-thumbnail-right声明
- 在.item元素内使用img标签插入头像。
注意:将img标签放到.item内容的开头!
.item : 嵌入大图
大图非常有冲击力,在图片类App中很常见:
参考资料:http://www.cnblogs.com/xuema/p/4371183.html
ionic入门之色彩、图标和边距和界面组件:列表的更多相关文章
- ionic入门之色彩、图标、边距和界面组件:列表
目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...
- 精华 ionic入门之色彩、图标、边距和界面组件:列表
目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...
- Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...
- ionic入门之基本布局
目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.c ...
- Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...
- Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...
- Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...
- ionic 入门创建第一个应用demo
一.ionic卸载 1.清除旧版本的ionic框架 npm uninstall -g ionic npm uninstall -g cordova npm cache clear npm cache ...
- ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...
随机推荐
- 小谷的战斗Jquery(三)--水平和垂直菜单
日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style=& ...
- memcached 实验论文
虽然在这个年龄段谈话memcached 它可能是一个有点晚,最为cached 在应用程序中redis 在之上,下面将谈谈自己的一些看法, 这个文件是不是memcached 理论描述,只写的实验数据和结 ...
- MVC 01
ASP.NET MVC 01 - ASP.NET概述 本篇目录: ASP.NET 概述 .NET Framework 与 ASP.NET ASP.NET MVC简介 ASP.NET的特色和优势 典型案 ...
- 《TCP/IP作品详细解释2:达到》注意事项--IP地址
1.接口和地址 如下面的图全部本文中讨论的接口和地址的结构看一个示例配置: 上图中显示了我们三个接口样例:以太网接口,SLIP接口和环回接口. 它们都有一个链路层地址作为地址列表中的第一个结点. 显示 ...
- NBA球员 ESPN前20排名:詹姆斯再居榜首
2014年 ESPN球员实力最后排名 没想到 保罗-乔治没有上榜.之前预測的火箭两大明星排名落后了,杜兰特排到第8有点出乎意料. 戴维斯升得那么快有点出乎意料,一个球队拥有两位排前十位的球队:骑士,快 ...
- Thread thread2 = new Thread()
Thread thread2 = new Thread() { @Override public void run() { test.function(); } }; thread1.start(); ...
- CGI原理解析系列之中的一个----CGI怎样获取WEBserver数据
//gcc get_post.c -o get_post.ums; #include <stdio.h> #include <stdlib.h> #include <un ...
- MVC 分离Controllers-Views
将MVC中的Controllers.Model和View分别放到单独的项目中 Model: 新建-项目-Windows-类库 MVCTest.Model Controller:新建-项目-Window ...
- 编译的依赖不能vs的release工程
前言: 今天,我们正在做一个ocx插件的时候,放到刚装好win7系统的虚拟机上面注冊,弹出以下的一个错误提示: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- php异或加密解密算法的实现
function xor_enc($str,$key) { $crytxt = ''; $keylen = strlen($key); for($i=0;$i<strlen($str);$i++ ...