目录:

  1. 色彩、图标和边距
    1. 色彩
    2. 图标
    3. 内边距
  2. 界面组件:列表
    1. 列表:.list
    2. 成员容器:.item
    3. .item: 嵌入文本
    4. .item : 嵌入图标
    5. .item : 嵌入头像
    6. .item : 嵌入缩略图
    7. .item : 嵌入大图

色彩

ionic定义了九种前景/背景/边框的色彩样式,:

可以在任何元素上使用这些样式设置前景和背景颜色:

<any class="positive-bg energized"> ... </any> ### 图标 ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式,有超过500个图标可供选择。

使用图标很简单,在元素上声明以下两个CSS类即可:

  • .icon - 将元素声明为图标

  • .ion-{icon-name} - 声明要使用的具体图标 通常使用i元素定义图标,例如下面声明了元素显示ion-home图标:

可以在任何元素中插入图标,使用元素的font-size样式指定图标的大小:

<any style="font-size:100px;"> </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元素内, 可以插入文本、徽章、图标、图像(头像、缩略图或大图)、按钮等各种 样式的元素:

PS:图片中“徽章”应为badge。

.item : 嵌入文本

列表成员中经常需要显示不同规格的文本,比如今日头条的新闻列表:

.item元素可以使用h1~h6/p标签插入不同规格的文本。

.item : 嵌入图标

列表成员的内容中插入图标,比单纯的文字更加生动:

要插入图标,需要满足两个条件:

  1. 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧, 分别使用.item-icon-left和.item-icon-right声明
  2. 在.item元素内插入图标。

.item : 嵌入头像

很多社交App中,一个相当固定的UI模式是包含用户头像的信息列表:

在ionic中,头像被设置为40x40固定大小。和插入图标类似,向.item 中插入头像需要满足两个条件:

1.在.item元素上声明头像位置。头像可以位于列表的左侧或右侧, 分别使用.item-avatar-left和.item-avatar-right声明 2.在.item元素内使用img标签插入头像。

.item : 嵌入缩略图

回到今日头条的新闻列表,我们给它加上两张新闻图片:

在ionic中,缩略图被定义为80px大小,比头像大,适合新闻图片。 和插入头像类似,向.item中插入缩略图需要满足两个条件:

在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧, 分别使用.item-thumbnail-left和.item-thumbnail-right声明 在.item元素内使用img标签插入头像。 注意:将img标签放到.item内容的开头!

.item : 嵌入大图

大图非常有冲击力,在图片类App中很常见:

ionic入门之色彩、图标、边距和界面组件:列表的更多相关文章

  1. 精华 ionic入门之色彩、图标、边距和界面组件:列表

    目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...

  2. 第15.10节 PyQt(Python+Qt)入门学习:Qt Designer可视化设计界面组件与QWidget类相关的组件属性详解

    PyQt学习有阵子了,对章节的骨架基本考虑好了,准备本节就写组件的属性的,结果一是日常工作繁忙,经常晚上还要加班,二是Qt的组件属性很多,只能逐一学习.研究和整理,花的时间有点长,不过终于将可视化设计 ...

  3. ionic入门之色彩、图标和边距和界面组件:列表

    色彩 ionic定义了九种前景/背景/边框的色彩样式,: 可以在任何元素上使用这些样式设置前景和背景颜色: <any class="positive-bg energized" ...

  4. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  5. ionic入门之基本布局

    目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.c ...

  6. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

  7. Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...

  8. Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...

  9. ionic 入门创建第一个应用demo

    一.ionic卸载 1.清除旧版本的ionic框架 npm uninstall -g ionic npm uninstall -g cordova npm cache clear npm cache ...

随机推荐

  1. java类初始化的过程

    在复习Thinking in java的过程中看到了相关内容,顺便整理一下,像下面一样的代码具体的执行顺序(ABCD都是类) public class A { public A(String text ...

  2. 接入WebSocket记录

    为什么用 WebSocket 因为APP里面有个聊天功能,需要服务器主动推数据到APP.HTTP 通信方式只能由客户端主动拉取,服务器不能主动推给客户端,如果有实时的消息,要立刻通知客户端就麻烦了,要 ...

  3. LeetCode Find All Duplicates in an Array

    原题链接在这里:https://leetcode.com/problems/find-all-duplicates-in-an-array/ 题目: Given an array of integer ...

  4. Object转数组

    int length = Array.getLength(value);String[] newarray = new String[length];for (int i = 0; i < le ...

  5. 用Netty开发中间件:高并发性能优化

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...

  6. handler发消息的形式

    1.onCreate()中写好handler的接受机制,准备接受并处理消息 2.thread中利用handler.post(Runnable r): protected void onCreate(B ...

  7. Timusoj 1982. Electrification Plan

    http://acm.timus.ru/problem.aspx?space=1&num=1982 1982. Electrification Plan Time limit: 0.5 sec ...

  8. Entity Framework7 有哪些不同?现在开发到什么程度了?

    Entity Framework7之开篇 一.Entity Framework7 简介 Entity Framework7简称EF7,是微软正在开发的最新的在.NET应用中首选的数据访问技术.它是轻量 ...

  9. js 小数相加

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  10. Java反射遍历数组

    日志中有时候需要查看数组中的值,但是重载很多的打印函数,觉得很别扭.所以想通过反射,获取数组中的值,打印出来.Java提供了数组反射操作的类,之前没有关注过,提供的方法简单易用. public sta ...