ionic-CSS：List(列表)

List(列表)

列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。
列表可以是基本文字、按钮，开关，图标和缩略图
列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。
ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。
为了实现更牛逼的效果你可以是使用Ionic's AngularJS directives. 点击 AngularJS list docs 了解更多.

 
  
 
  ... 
  

*** 了解更多Lists的扩展功能, 点击 AngularJS List Docs

---

List Dividers(列表分隔符)

我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。

 

  
 
    Candy Bars 
  
 

   
    Butterfinger 
   

  ...

---

List Icons(带图标列表)

我们可以在列表项的左侧或右侧指定图标。了解更多Icon相关.
使用item-icon-left 图标在左侧，item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
以下实例中，我们在列表项中使用了 标签，使得每个列表项可点击。 如果使用 或者 标签, 同时又没有没有图标被添加在右侧,那么一个小小的右箭头将会被自动添加.

实例中，第一项只有左侧图标，第二项左右均有图标，第三项有左侧图标（还有注释 item-note ），第四项有 badge（标记）元素。

 

   
     
    Check mail 
   

   
     
    Call Ma 
     
   

   
     
    Record album 
     
      Grammy 
     
   

   
     
    Friends 
    0 
  

---

List Buttons(按钮列表)

使用 item-button-right 或 item-button-left 类将按钮放在列表项中。

 

  
 
    Call Ma 
    

...

---

Item Avatars(带头像列表)

使用 item-avatar 来创建一个带头像的列表.

 
   
    ![](venkman.jpg) 
    
Venkman
 
    
Back off, man. I'm a scientist.
 
   

  ...

---

Item Thumbnails(缩略图列表)

item-thumbnail-left 类用于添加左侧对齐的缩略图，item-thumbnail-right 类用于添加右侧对齐的缩略图。

 

   
    ![](cover.jpg) 
    
Pretty Hate Machine
 
    
Nine Inch Nails
 
  

  ...

Quick ng-repeat 例子

---

Inset Lists(内嵌列表)

我们可以在容器当中内嵌列表，列表不会显示完整的宽度。 内嵌列表的样式为：list list-inset，与常规列表区别是，它设置了外边距（marign）, 类似于选项卡。 内嵌列表是没有阴影效果的，滚动时效果会更好。Inset forms 有更\例子.

 
  
 
    Raiders of the Lost Ark 
  

  ...