作者:本站编辑 发布时间: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 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>
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.
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
<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
<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>