列表和列表项

QList和QItem是一组组件,可以一起工作以将多个线性项作为单个连续元素垂直显示。它们最适合显示与信息行类似的数据类型,例如联系人列表、播放列表或菜单。每行称为一个项目。 QItem也可以在QList之外使用。

列表可以封装项目或类似项目的组件,例如QExpansionItemQSlideItem。如果需要,也可以使用QSeparator拆分部分。

列表项具有以下预建子组件:

  • QItemSection——项目部分可以对特定内容有多种用法。它们通过avatarthumbnailside属性进行控制。没有属性,它将渲染QItem的主要部分(跨越最大可用空间)

  • QItemLabel——项标签对于QItemSection中的预定义文本内容类型或QList本身的类似标题的内容很有用

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

Basic
On a dark background
Dense

QItemSection

Left avatar/thumbnail QItemSection
Right avatar/thumbnail QItemSection

TIP

当您有多行项目时,可以使用QItemSection侧面/头像上的top属性将各部分与顶部对齐,从而覆盖默认的中间对齐方式。

Side QItemSection

激活状态

Active prop

QItemLabel

WARNING

注意,您可以使用lines属性处理标签溢出,告诉它可以跨越多少行。 但是,此功能使用特定于Webkit的CSS,因此无法在IE/Edge中使用。

ItemLabel

更多涉及的例子

Contact list
Settings
Emails
Folder listing

在下面的示例中,出于演示目的,我们使用active属性代替QItem的路由管理器属性(toexact)。 UMD没有Vue Router,因此您将无法在Codepen/jsFiddle中使用它。

Menu

TIP

对于更复杂的菜单,请考虑同时使用QExpansionItem.

连接到Vue Router

您可以通过绑定<router-link>属性来将QItems与Vue Router一起使用。 这允许监听当前的应用路由,并在单击/点击时触发路由。

<q-item to="/inbox" exact>
  <q-item-section avatar>
    <q-icon name="inbox" />
  </q-item-section>

  <q-item-section>
    Inbox
  </q-item-section>
</q-item>

QList API

Loading API...
Please wait...

QItem API

Loading API...
Please wait...

QItemSection API

Loading API...
Please wait...

QItemLabel API

Loading API...
Please wait...