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

心已赠人 2022-07-19 05:15 82阅读 0赞

### 色彩 ###

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

![color][]

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

1.  <any class="positive-bg energized">
2.  ...
3.  </any>

### 图标 ###

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

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

*  .icon - 将元素声明为图标
 *  .ion-\{icon-name\} - 声明要使用的具体图标

通常使用i元素定义图标，例如下面声明了元素显示ion-home图标：

1.  <i class="icon ion-home"></i>

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

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

1.  <any style="font\-size:100px;">
2.  <i class="icon ion-search"></i>
3.  </any>

### 内边距 ###

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

![padding][]

样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。

### 列表 : .list ###

列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器， 使用.item定义列表成员：

1.  <any class="list">
2.  <any class="item">...</any>
3.  <any class="item">...</any>
4.  <any class="item">...</any>
5.  <any class="item">...</any>
6.  </any>

对列表外观的定制化主要集中在.item元素上，.list元素仅有 少数的几个样式定义：

![list][]

### 成员容器 : .item ###

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

![.item][]

### .item : 嵌入文本 ###

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

![list][list 1]

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

### .item : 嵌入图标 ###

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

![inset][]

要插入图标，需要满足两个条件：

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

### .item : 嵌入头像 ###

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

![wechat][]

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

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

### .item : 嵌入缩略图 ###

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

![list][list 1]

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

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

注意：将img标签放到.item内容的开头！

### .item : 嵌入大图 ###

大图非常有冲击力，在图片类App中很常见：

![instagram][]

源引：http://www.cnblogs.com/xuema/p/4371857.html

[color]: /images/20220718/0babc1985c9748c39abaf2a3043fb01a.png
[ionics.com]: http://ionicons.com/
[padding]: /images/20220718/46cac457efc64bcaa89378972b94f462.png
[list]: /images/20220718/283c5a356558492080b56591d2c4cb1d.png
[.item]: /images/20220718/e7dedeef7a9f41c9a40eb7cc4250fad2.png
[list 1]: /images/20220718/58a2efd877604a0993f76041a67bc979.png
[inset]: /images/20220718/6eb59b67e63049fe8358e43084a63aa1.png
[wechat]: /images/20220718/f807fae7cf9a439ebf2516155e84915c.png
[instagram]: /images/20220718/4c9ce8dfcb4c4d4e9e70934851c2b58a.png