本文整理自网络,侵删。
ionic 列表
列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。
列表可以是基本文字、按钮,开关,图标和缩略图等。
列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。
ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。
基本用法:
<ul class="list"> <li class="item"> ... </li> </ul>
尝试一下 ?
列表分隔符
我们可以使用 item-divider 类来为列表创建分隔符,默认情况下,列表项以不同的背景颜色和字体加粗来区分,但你也可以很容易的定制他。
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>
尝试一下 ?
带图标列表
我们可以在列表项的左侧或右侧指定图标。
使用 item-icon-left 图标在左侧, item-icon-right 设置图标在右侧。如果你需要在两边都有图标,则两个类都添加上即可。
以下实例中,我们在列表项中使用了 <a> 标签,使得每个列表项可点击。
列表项在使用 <a>或<button> 元素时,如果右侧未添加图标,则会自动添加上箭头号。
相关阅读 >>
更多相关阅读请进入《ionic》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者