ionic入门之色彩、图标和边距和界面组件:列表
来源:互联网 发布:手机版网站 知乎 编辑:程序博客网 时间:2024/05/21 09:05
色彩
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/4371857.html
- ionic入门之色彩、图标和边距和界面组件:列表
- 【Ionic入门】Ionic 列表
- ionic之自动生成app图标和启动页面
- ionic使用记录----色彩、图标、内边距
- ionic-CLI-图标和启动动画自动生成ionic resources
- ionic-CLI-图标和启动动画自动生成ionic resources
- ionic更改应用图标和启动画面
- ionic生成应用图标和启动页
- ionic入门之深链接和延迟加载
- MFC之二图标的替换和界面限制大小
- App图标和启动界面
- python3入门之列表和元组
- Bootstrap入门之段落、列表和表格
- ionic之创建列表
- ionic之无序列表
- ionic 自动生成多尺寸的图标和splash图
- ionic自动生成app图标和启动页面
- Ionic系列——修改应用图标和启动页
- linux下ftp客户端主动模式设置
- POJ 1745 Divisibility
- Android写出高效清晰Layout布局文件的一些技巧
- Hadoop监控之Ganglia整合
- ffmpeg封装本公司的h264编码库
- ionic入门之色彩、图标和边距和界面组件:列表
- C#的访问修饰符
- C++中派生类构造函数解析
- elasticsearch reindex 工具汇总
- ng-include 包含页面,但是使用controller不能获取里面的对象
- 1062 Text Reverse
- iOS 时间戳 毫秒 微秒
- Mac ox 10.11上新版cocoPods安装步骤
- iOS开发企业版ipa分发