8、列表：ion-list

时间：2016-06-06 06:44:12 阅读：272 评论：0 收藏：0 [点我收藏+]

1、基本样式

no-lines 属性隐藏列表项之间的分割符

inset 属性去掉 ion-list的外边框。

默认的 ion-list 是有外边框的。

/* ---示例代码----*/
 
<ion-content>
 
  <ion-list no-lines>
    <ion-item>no-lines</ion-item>
    <ion-item>no-lines</ion-item>
    <ion-item>no-lines</ion-item>
  </ion-list>
 
  <ion-list>
    <ion-item>default</ion-item>
    <ion-item>default</ion-item>
    <ion-item>default</ion-item>
  </ion-list>
 
  <ion-list inset>
    <ion-item>inset</ion-item>
    <ion-item>inset</ion-item>
    <ion-item>inset</ion-item>
  </ion-list>
 
</ion-content>
 
/* ---示例代码----*/

技术分享

2、电话簿样式

当要把列表进行分组的时候请使用 <ion-item-group> 而不是 <ion-list> 。 使用 <ion-item-group> 来划分多个部分。他如同一个电话簿。

/* ---示例代码----*/
 
<ion-content>
 
  <ion-item-group>
 
    <ion-item-divider light>A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
 
    <ion-item-divider light>B</ion-item-divider>
    <ion-item>Beijing</ion-item>
 
  </ion-item-group>
 
</ion-content>
 
/* ---示例代码----*/

技术分享

3、列表的头部

每一个列表都可以带有一个列表的头部用来显示信息。他就是 <ion-list-header>

/* ---示例代码----*/
 
<ion-content>
 
  <ion-list>
    <ion-list-header>
      Action
    </ion-list-header>
    <ion-item>Terminator II</ion-item>
    <ion-item>The Empire Strikes Back</ion-item>
    <ion-item>Blade Runner</ion-item>
  </ion-list>
 
</ion-content>
 
/* ---示例代码----*/

技术分享

4、图标 ion-item

图标的位置可以用 item-left 和 item-right 进行控制。

/* ---示例代码----*/
 
<ion-list>
   
  <ion-item>
    <ion-icon name="leaf" item-left></ion-icon>
    Herbology
    <ion-icon name="rose" item-right></ion-icon>
  </ion-item>
 
</ion-list>
 
/* ---示例代码----*/

技术分享

5、缩略图

项目缩略图展示图像占用一个项目的整个高度。要使用一个缩略图，在项目中添加一个 <ion-thumbnail> 组件。使用该项目的 item-left、item-right 属性设置缩略图的位置：

/* ---示例代码----*/
 
<ion-list>
   
  <ion-item>
    <ion-thumbnail item-left>
      <img src="img/1.jpg">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    <button clear item-right>View</button>
  </ion-item>
 
</ion-list>
 
/* ---示例代码----*/

技术分享

6、头像

ion-avatar 比图标大。比缩略图小所以适合做头像。当多个标题或段落标记被添加到<ion-item>时，该 item 将自动调整其高度以适应新的行。

/* ---示例代码----*/
 
<ion-list>
 
  <ion-item>
    <ion-avatar item-left>
      <img src="img/1.jpg">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
 
</ion-list>
 
/* ---示例代码----*/

技术分享

7、滑动项目 ion-item-sliding

ion-item-sliding 包含着整个 ion-item 按钮则在他的子集 ion-item-options 中配置。

/* ---示例代码----*/
 
<ion-list>
   
  <ion-item-sliding>
    <ion-item>
      <ion-avatar item-left>
        <img src="img/1.jpg">
      </ion-avatar>
      <h2>Slimer</h2>
    </ion-item>
    <ion-item-options>
      <button primary>
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button secondary>
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
  </ion-item-sliding>
   
</ion-list>
 
/* ---示例代码----*/

技术分享

8、列表：ion-list

原文：http://www.cnblogs.com/dandingjun/p/5562527.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)