ionic与php,ionic 列表

本文介绍了移动App中列表的设计方法,包括基本用法、分隔符、带图标列表、按钮列表、带头像列表及缩略图列表等。还介绍了如何创建内嵌列表,并提供了丰富的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。

列表可以是基本文字、按钮,开关,图标和缩略图等。

列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。

ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。

基本用法:

  • ...

列表分隔符

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

Candy Bars

Butterfinger

...

带图标列表

我们可以在列表项的左侧或右侧指定图标。

使用 item-icon-left 图标在左侧, item-icon-right 设置图标在右侧。如果你需要在两边都有图标,则两个类都添加上即可。

以下实例中,我们在列表项中使用了 标签,使得每个列表项可点击。

列表项在使用 或 元素时,如果右侧未添加图标,则会自动添加上箭头号。

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

Check mail

Call Ma

Record album

Grammy

Friends

0

按钮列表

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

Call Ma

...

带头像列表

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

      

Venkman

Back off, man. I'm a scientist.

...

缩略图列表

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

      

Pretty Hate Machine

Nine Inch Nails

...

内嵌列表(inset list)

我们可以在容器当中内嵌列表,列表不会显示完整的宽度。

内嵌列表的样式为:list list-inset,与常规列表区别是,它设置了外边距(marign),类似于选项卡。

内嵌列表是没有阴影效果的,滚动时效果会更好。

Raiders of the Lost Ark

...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值