精华 ionic入门之色彩、图标、边距和界面组件:列表
发布于 2年前 作者 2596887568 5743 次浏览 来自 分享

目录:

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

色彩

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

001.png

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

<any class="positive-bg energized"> … </any>

图标

ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式,有超过500个图标可供选择。

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

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

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

    要了解有哪些图标及具体名称,需要访问ionics.com。 点击某个图标即可查看其CSS类名称。

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

<any style="font-size:100px;"> </any>

内边距

ionic定义了常用的内边距样式:

002.png

样式名很直白,边距统一为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元素仅有 少数的几个样式定义:

003.png

成员容器 : .item

列表的样式定制主要发生在.item元素上。在.item元素内, 可以插入文本、徽章、图标、图像(头像、缩略图或大图)、按钮等各种 样式的元素:

004.png

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

.item : 嵌入文本

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

005.png

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

.item : 嵌入图标

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

006.png

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

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

.item : 嵌入头像

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

007.png

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

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

.item : 嵌入缩略图

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

008.png

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

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

.item : 嵌入大图

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

009.png

参考资料:http://www.hubwiz.com/course/5507ca5be564e51314f544e4/

标签: ionic, ionic入门

回到顶部