作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versatile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

For more power you can use Ionic's AngularJS directives. Check out the AngularJS list docs to get more detailed information.

<ulclass="list"><liclass="item">       ...     </li></ul>

* For a more extensive overview on Lists, read AngularJS List Docs

List Dividers

List items can also be dividers to organize and group the list items. Use the item-divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

<divclass="list"><divclass="item item-divider">     Candy Bars   </div><aclass="item"href="#">     Butterfinger   </a>  ... </div>

List Icons

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each item element. Icons can easily be added to any item by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to the right. When a list item has an icon on both sides then both classes will need to be applied.

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both left and right side icons. The third item has no a right side icon assigned (whichs defaults to the right arrow). Additionally, the third item also adds an item-note. The fourth icon has added a badge element.

<divclass="list"><aclass="item item-icon-left"href="#"><iclass="icon ion-email"></i>     Check mail   </a><aclass="item item-icon-left item-icon-right"href="#"><iclass="icon ion-chatbubble-working"></i>     Call Ma     <iclass="icon ion-ios-telephone-outline"></i></a><aclass="item item-icon-left"href="#"><iclass="icon ion-mic-a"></i>     Record album     <spanclass="item-note">       Grammy     </span></a><aclass="item item-icon-left"href="#"><iclass="icon ion-person-stalker"></i>     Friends     <spanclass="badge badge-assertive">0</span></a></div>

List Buttons

Use item-button-right or item-button-left to place a button within an item.

<divclass="list"><divclass="item item-button-right">     Call Ma     <buttonclass="button button-positive"><iclass="icon ion-ios-telephone"></i></button></div>  ... </div>

本文责任编辑:  加入会员收藏夹 点此参与评论>>
上一篇文章:Clear Buttons


CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网