列表和列表项

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

列表可以封装列表项或类似列表项组件，例如 QCollapsible.

列表项包含以下内容：

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QList',
    'QListHeader',
    'QItem',
    'QItemMain',
    'QItemSeparator',
    'QItemSide',
    'QItemTile'
  ],

  // 如果你使用v-close-overlay:
  directives: ['CloseOverlay']
}

基本用法

稍后我们将在各自的部分介绍每个组件，但现在，请看一下在使用列表时如何构建模板。

<q-list highlight>
  <q-list-header>Recent chats</q-list-header>
  <q-item>
    <q-item-side>
      <q-item-tile avatar>
        <img src="statics/boy-avatar.png">
      </q-item-tile>
    </q-item-side>
    <q-item-main label="John Doe" />
    <q-item-side right>
      <q-item-tile icon="chat_bubble" color="green" />
    </q-item-side>
  </q-item>
  <q-item>
    <q-item-side avatar="statics/linux-avatar.png" />
    <q-item-main label="Jim Doe" />
    <q-item-side right icon="chat_bubble" />
  </q-item>
  <q-item-separator />
  <q-list-header>Previous chats</q-list-header>
  <q-item>
    <q-item-side avatar="statics/guy-avatar.png" />
    <q-item-main label="Jack Doe" />
  </q-item>
</q-list>

请注意，QItemMain和QItemSide可以包含QItemTiles，或者为了方便起见，您可以使用它们自己的属性来定义内容。

基于Webpack为您的应用打包的机制，在某些情况下，您可能需要使用QItemTile，比如头像或图片。原因很简单：如果你使用QItemSide的avatar属性，你必须提供静态文件夹的路径，不能使用assets文件夹或相对路径。相反，后两者可以与包装一个<img>HTML标签的QItemTile一起使用。仔细看上面例子中的图像路径（statics/guy-avatar.png vs ~assets/boy-avatar.png）。另请阅读应用静态资源处理 以了解Webpack如何将资源包含到软件包中。

组件

以下是可用于定义列表和列表项的Quasar组件列表：

Quasar List and List Items

QList

QList封装了所有提到的其他组件。这不是强制性的，但确实有助于保持良好的设计。QList也定义了一些将应用于所有QItem（或类似QItem的组件）的属性，如多行、分隔符、链接、高亮等等。

Vue属性 类型 说明
striped 布尔 间歇性地将高亮应用于QItems，从第二个QItem开始。
striped-odd 布尔 间歇性地将高亮应用于QItems，从第一个QItem开始。
highlight 布尔 将高亮应用于所有QItem。这仅在桌面上用户悬停QItem时起作用。
link 布尔 将高亮和指针光标应用于所有QItem。
dense 布尔 让QItem密集。
sparse 布尔 使QItems稀疏。
multiline 布尔 使QItems成为多行。
separator 布尔 让QItem之间有一个分隔符。
inset-separator 布尔 让QItem之间有一个嵌入的分隔符。
dark 布尔 当你的组件在黑暗的背景上呈现
no-border 布尔 删除QList周围的默认边框。

QListHeader

在QList中，您可以显示头部/标题部分。

Vue属性 类型 说明
inset 布尔 放置一个嵌入的分隔符。 
<q-list>
  <q-list-header>Folders</q-list-header>
  <!-- 插入QItems... -->

  <q-list-header>Files</q-list-header>
  <!-- 插入QItems... -->
</q-list>

QItemSeparator

如果您想要QItem外部分隔符（也有内部的分隔符，您可以在本页后面的QItem描述中看到），请使用QItemSeparator组件。 分隔QList的不同部分也很有用，例如，在QListHeader之前。

Vue属性 类型 说明
inset 布尔 放置一个嵌入的分隔符。 
<q-list>
  <q-list-header>Folders</q-list-header>
  <!-- 插入QItems... -->

  <q-item-separator />

  <q-list-header>Files</q-list-header>
  <!-- 插入QItems... -->
</q-list>

<!-- 和/或r -->
<q-list>
  <q-item ...>...</q-item>

  <!-- 插入分隔符的例子 -->
  <q-item-separator inset />

  <q-item ...>...</q-item>
  <q-item-separator />
  <q-item ...>...</q-item>
  <q-item-separator />
  <q-list-header>Files</q-list-header>
  <q-item ...>...</q-item>
</q-list>

QItem

Vue属性 类型 说明
dense 布尔 使QItem密集（窄的padding）。
sparse 布尔 让QItem稀疏（大的padding）。
separator 布尔 让QItem在它和之前的QItem之间有一个分隔符。
inset-separator 布尔 让QItem在它和之前的QItem之间有一个嵌入的分隔符。
multiline 布尔 使QItem多行。垂直对齐顶端的QItem。用于超过2-3行的QItem内容。
highlight 布尔 将高亮应用于QItem。在桌面上当用户将鼠标悬停在它上面时
link 布尔 将高亮和指针光标应用于QItem。
tag 字符串 默认使用的HTML标签是’div’，但如果需要，这可以是任何HTML标签。请阅读下面的更多信息。
dark 布尔 在黑暗背景下渲染时

另请查看下一节以了解更多属性，并了解如何将您的QItem用作路由器链接。

使用QItem作为路由器链接

如果你希望你的QItem和Vue的<router-link>一样，那么你可以使用这些附加属性（它和<router-link>完全一样）：

属性 类型 说明
to 字符串/对象 路由导航到
exact 布尔 在添加router-link-active CSS类时，匹配指定的确切路由（而不是其子节点）。
append 布尔 导航时将路由定义追加到当前路由。
replace 布尔 使用新路径替换当前路由，而不是将其添加到窗口历史记录队列。

有关这些属性的更多详细信息，请参阅Vue路由器文档。

使用特定的HTML标记进行渲染

请参考下面的例子以了解如何使用tag属性。在这个例子中，我们利用<label>标签以使浏览器自动连接到复选框（QCheckbox、QToggle）或单选框（QRadio）。当点击/轻按一个<label>时，被包裹的复选框会切换它们的状态（选中/取消选中）而被包裹的单选框将会被选中。

<!--
  我们希望点击/轻按整个QItem
  以切换复选框，所以我们使用tag="label"
  以<label>标签渲染QItem。
-->
<q-item tag="label">
  <q-item-side>
    <q-checkbox v-model="checkboxModel" />
  </q-item-side>
  <q-item-main>
    <q-item-tile label>Notifications</q-item-tile>
    <q-item-tile sublabel>Notify me about updates to apps or games that I downloaded</q-item-tile>
  </q-item-main>
</q-item>

QItemSide

Vue属性 类型 说明
color 字符串 使用Quasar调色板中的颜色。
text-color 字符串 覆盖文字颜色，一个来自Quasar调色板中的颜色。
inverted 布尔 反转颜色。
right 布尔 对QItem的右侧进行必要的设计调整。
icon 字符串 要使用的图标。使用图标、图像、头像或字母。
image 字符串 要使用的图像URL（指向静态图像）。使用图标、图像、头像或字母。
avatar 字符串 要使用的头像的URL（指向静态图像）。使用图标、图像、头像或字母。
letter 字符串 定义字符的一个字符字符串。使用图标、图像、头像或字母。
stamp 字符串 仅适用于右侧。定义字符的一个字符字符串。使用图标、图像、头像或字母。
tag 字符串 QItemTile的默认HTML标签是’div’，但如果需要的话，它可以是任何HTML标签。

使用icon、image、avatar、letter或stamp属性，或者，对于更多控制，请改为插入QItemTiles。仅使用一种方法。

QItemMain

Vue属性 类型 说明
label 字符串 用作标题的标签。
sublabel 字符串 用作副标题的标签。
label-lines 字符串/数字 标签可以跨越的行数。
sublabel-lines 字符串/数字 子标签可以跨越的行数。
inset 布尔 当QItem没有左侧时很有用，但是您希望将内容对齐，就好像它有左侧一样。
tag 字符串 QItemTile的默认HTML标签是’div’，但如果需要的话，它可以是任何HTML标签。

使用标签属性或者为了获得更多的控制，插入QItemTiles来定义标签和子标签。仅使用一种方法。

QItemTile

QItemTile可用于更多地控制QItem的左侧，右侧或主要内容的内容。

Vue属性 类型 说明
color 字符串 使用Quasar调色板中的颜色。
text-color 字符串 覆盖文字颜色，一个来自Quasar调色板中的颜色。
inverted 布尔 反转颜色。
icon 字符串 要使用的图标。使用图标、图像、头像或字母作为属性。
image 布尔 封装一个图像。它的内容必须是<img>,src属性指向静态。使用图标、图像、头像或字母作为属性。
avatar 布尔 封装头像。它的内容必须是<img>,src属性指向静态。使用图标、图像、头像或字母作为属性。
letter 字符串 用于定义字母的一个字符字符串。使用图标、图像、头像或字母作为属性。
tag 字符串 QItemTile的默认HTML标签是’div’，但如果需要的话，它可以是任何HTML标签。

QItemTile还有更多的属性，但只有QItemTile被QItemMain包装时才使用以下内容：

Vue属性 类型 说明
label 布尔 封装QItem的标签/标题。
sublabel 布尔 封装QItem的副标签/副标题。
lines 字符串/数字 标签/副标签可以跨越的行数。省溢时使用省略号。只能与label和sublabel结合使用。

使用QCollapsible与QItems

QCollapsible是一个QItem包装器，因此您可以将它们作为QList中的QItem使用，或和QItem一起混合使用。这里有两个例子：

<!--
  注意我们使用QCollapsibles和QItems
   作为QList的直接子元素。

   我们基本上建立一个菜单。
-->
<q-list separator>
  <!-- 使用折叠项以隐藏子级菜单条目 -->
  <q-collapsible icon="inbox" label="Inbox" sublabel="Where your email is">
    <q-item link to="/inbox/1">
      <q-item-side icon="mail" />
      <q-item-main label="Email 1" />
    </q-item>
    <q-item link to="/inbox/2">
      <q-item-side icon="mail" />
      <q-item-main label="Email 2" />
    </q-item>
    <q-collapsible icon="favorite" label="Favorites">
      <q-item link to="/inbox/favorites/1">
        <q-item-side icon="mail" />
        <q-item-main label="Favorite 1" />
      </q-item>
      <q-item to="/inbox/favorites/2">
        <q-item-side icon="mail" />
        <q-item-main label="Favorite 2" />
      </q-item>
    </q-collapsible>
    <q-item to="/inbox/3">
      <q-item-side icon="mail" />
      <q-item-main label="Email 3" />
    </q-item>
  </q-collapsible>

  <!-- 菜单链接 -->
  <q-item link to="/snoozed">
    <q-item-side icon="schedule" />
    <q-item-main>
      <q-item-tile label>Snoozed</q-item-tile>
    </q-item-main>
  </q-item>

  <!-- 使用折叠项以隐藏子级菜单条目 -->
  <q-collapsible icon="send" label="Sent">
    <q-item to="/sent/1">
      <q-item-side icon="mail" />
      <q-item-main label="Email 1" />
    </q-item>
  </q-collapsible>

  <!-- 菜单链接 -->
  <q-item link to="/trash">
    <q-item-side icon="delete" />
    <q-item-main>
      <q-item-tile label>Trash</q-item-tile>
    </q-item-main>
  </q-item>
</q-list>

更多示例

电子邮件列表

<q-list highlight inset-separator>
  <q-item>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main label="Brunch this weekend? Brunch this weekend? Brunch this weekend?" label-lines="1" />
    <q-item-side right stamp="1 min" />
  </q-item>
  <q-item multiline>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main
      label="Brunch this weekend? Brunch this weekend? Brunch this weekend?"
      label-lines="1"
      sublabel="John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe"
      sublabel-lines="2"
    />
    <q-item-side right>
      <q-item-tile stamp>1 week ago</q-item-tile>
    </q-item-side>
  </q-item>
  <q-item multiline>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main
      label="Brunch this weekend? Brunch this weekend? Brunch this weekend?"
      label-lines="2"
      sublabel="John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe"
    />
    <q-item-side right stamp="10 min" />
  </q-item>
  <q-item multiline>
    <q-item-side>
      <q-item-tile avatar>
        <img src="statics/boy-avatar.png">
      </q-item-tile>
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Brunch <span>5</span></q-item-tile>
      <q-item-tile sublabel lines="2">
        John Doe John Doe John Doe John Doe John Doe John Doe
        John Doe John Doe John Doe John Doe John Doe John Doe
        John Doe John Doe John Doe John Doe
      </q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-item-tile stamp>10 min</q-item-tile>
      <q-item-tile icon="star" color="yellow" />
    </q-item-side>
  </q-item>
  <q-item multiline>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main>
      <q-item-tile label lines="1">Brunch this weekend? Yeah, this weekend. Really. This one.</q-item-tile>
      <q-item-tile sublabel lines="2">
        <span>John Doe</span>
        -- I'll be in your neighborhood doing errands this
        weekend. Do you want to grab brunch?
      </q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-item-tile stamp>2 years</q-item-tile>
      <q-item-tile icon="mail" color="primary" />
    </q-item-side>
  </q-item>
</q-list>

<q-list inset-separator class="q-mt-md">
  <q-item>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main label="Brunch this weekend?" />
    <q-item-side right>
      <q-btn flat round dense icon="more_vert">
        <q-popover>
          <q-list link>
            <q-item v-close-overlay>
              <q-item-main label="Reply" />
            </q-item>
            <q-item v-close-overlay>
              <q-item-main label="Forward" />
            </q-item>
            <q-item v-close-overlay>
              <q-item-main label="Delete" />
            </q-item>
          </q-list>
        </q-popover>
      </q-btn>
    </q-item-side>
  </q-item>
  <q-item>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main label="Brunch this weekend?" />
    <q-item-side right>
      <q-chip square color="primary" class="shadow-2">10k</q-chip>
    </q-item-side>
  </q-item>
  <q-item>
    <q-item-side avatar="statics/boy-avatar.png" />
    <q-item-main label="Brunch this weekend?" />
    <q-item-side right>
      <q-item-tile stamp>10 min ago</q-item-tile>
      <span class="text-amber">
        <q-item-tile icon="star" v-for="n in 2" :key="n" />
      </span>
    </q-item-side>
  </q-item>
</q-list>

聊天列表

<q-list highlight>
  <q-list-header>Recent chats</q-list-header>
  <q-item>
    <q-item-side>
      <q-item-tile avatar>
        <img src="statics/boy-avatar.png">
      </q-item-tile>
    </q-item-side>
    <q-item-main label="John Doe" />
    <q-item-side right>
      <q-item-tile icon="chat_bubble" color="green" />
    </q-item-side>
  </q-item>
  <q-item>
    <q-item-side avatar="statics/linux-avatar.png" />
    <q-item-main label="Jim Doe" />
    <q-item-side right icon="chat_bubble" />
  </q-item>
  <q-item-separator />
  <q-list-header>Previous chats</q-list-header>
  <q-item>
    <q-item-side avatar="statics/guy-avatar.png" />
    <q-item-main label="Jack Doe" />
  </q-item>
</q-list>

再举一个例子:

<q-list inset-separator>
  <q-item>
    <q-item-side icon="voice_chat" color="secondary" />
    <q-item-main label="Voice Chat with Joe" />
    <q-item-side right icon="voice_chat" color="secondary" />
  </q-item>
  <q-item>
    <q-item-side inverted icon="voice_chat" color="secondary" />
    <q-item-main label="Voice Chat with Joe" />
    <q-item-side right inverted icon="voice_chat" color="secondary" />
  </q-item>
  <q-item>
    <q-item-side inverted icon="voice_chat" color="amber" text-color="black" />
    <q-item-main label="Voice Chat with Joe" />
    <q-item-side right inverted icon="voice_chat" color="amber" text-color="black" />
  </q-item>
  <q-item>
    <q-item-side letter="J" color="secondary" />
    <q-item-main label="John Doe" />
    <q-item-side right letter="J" color="secondary" />
  </q-item>
  <q-item>
    <q-item-side inverted letter="J" color="secondary" />
    <q-item-main label="John Doe" />
    <q-item-side right inverted letter="J" color="secondary" />
  </q-item>
  <q-item>
    <q-item-side inverted letter="J" color="amber" text-color="black" />
    <q-item-main label="John Doe" />
    <q-item-side right inverted letter="J" color="amber" text-color="black" />
  </q-item>
</q-list>

文件夹和文件

<q-list>
  <q-list-header inset>Folders</q-list-header>
  <q-item>
    <q-item-side icon="folder" inverted color="primary" />
    <q-item-main>
      <q-item-tile label>Photos</q-item-tile>
      <q-item-tile sublabel>February 22, 2016</q-item-tile>
    </q-item-main>
    <q-item-side right icon="info" color="green" />
  </q-item>
  <q-item-separator inset />
  <q-list-header inset>Files</q-list-header>
  <q-item>
    <q-item-side icon="assignment" inverted color="grey-6" />
    <q-item-main>
      <q-item-tile label>Expenses spreadsheet</q-item-tile>
      <q-item-tile sublabel>March 2nd, 2016</q-item-tile>
    </q-item-main>
    <q-item-side right icon="info" />
  </q-item>
</q-list>

设置（嵌入表单组件）

<q-list link>
  <q-list-header>User controls</q-list-header>
  <q-item>
    <q-item-main>
      <q-item-tile label>Content filtering</q-item-tile>
      <q-item-tile sublabel>Set the content filtering level to restrict apps that can be downloaded</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-main>
      <q-item-tile label>Password</q-item-tile>
      <q-item-tile sublabel>Require password for purchase or use password to restrict purchase</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item-separator />
  <q-list-header>General</q-list-header>
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked_one" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Notifications</q-item-tile>
      <q-item-tile sublabel>Notify me about updates to apps or games that I downloaded</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked_two" color="secondary" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Sound</q-item-tile>
      <q-item-tile sublabel>Auto-update apps at anytime. Data charges may apply</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked_three" color="red" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Auto-add widgets</q-item-tile>
      <q-item-tile sublabel>Automatically add home screen widgets</q-item-tile>
    </q-item-main>
  </q-item>
</q-list>

<q-list class="q-mt-md">
  <q-list-header>Radios</q-list-header>
  <q-item link tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt1" />
    </q-item-side>
    <q-item-main label="Option 1" />
  </q-item>
  <q-item link tag="label">
    <q-item-side>
      <q-radio color="secondary" v-model="option" val="opt2" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 2</q-item-tile>
      <q-item-tile sublabel>Allows notifications</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item link tag="label">
    <q-item-side>
      <q-radio color="amber" v-model="option" val="opt3" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 3</q-item-tile>
      <q-item-tile sublabel lines="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q-item-tile>
    </q-item-main>
  </q-item>

  <q-item-separator />

  <q-list-header>Toggles</q-list-header>
  <q-item link tag="label">
    <q-item-main label="Events and reminders" />
    <q-item-side right>
      <q-toggle v-model="checked_one" />
    </q-item-side>
  </q-item>
  <q-item link tag="label" multiline>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum</q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-toggle v-model="checked_two" color="secondary" />
    </q-item-side>
  </q-item>
  <q-item link tag="label" multiline>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel lines="3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      </q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-toggle v-model="checked_three" color="amber" />
    </q-item-side>
  </q-item>

  <q-item-separator />

  <q-list-header>Selects</q-list-header>
  <q-item>
    <q-item-side icon="supervisor_account" />
    <q-item-main>
      <q-select hide-underline class="q-ma-none full-width" v-model="select" :options="selectOptions" />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="supervisor_account" />
    <q-item-main>
      <q-select hide-underline class="q-ma-none full-width" multiple toggle v-model="multipleSelect" :options="selectOptions" />
    </q-item-main>
  </q-item>

  <q-item-separator />

  <q-list-header>Ranges</q-list-header>
  <q-item>
    <q-item-side icon="volume_down" />
    <q-item-main>
      <q-slider v-model="range" :min="0" :max="50" label />
    </q-item-main>
    <q-item-side right icon="volume_up" />
  </q-item>
  <q-item>
    <q-item-side icon="volume_down" />
    <q-item-main>
      <q-slider v-model="range" :min="0" :max="50" label color="amber" />
    </q-item-main>
    <q-item-side right icon="volume_up" />
  </q-item>
  <q-item>
    <q-item-side icon="monetization_on" />
    <q-item-main>
      <q-range v-model="doubleRange" :min="0" :max="50" label color="secondary" />
    </q-item-main>
  </q-item>
</q-list>

电影列表

<q-list>
  <q-list-header>Documentaries</q-list-header>
  <q-item>
    <q-item-side image="statics/mountains.jpg" />
    <q-item-main label="Mountains Documentary" />
    <q-item-side right icon="movie" />
  </q-item>
  <q-item>
    <q-item-side image="statics/quasar-logo.png" />
    <q-item-main>
      <q-item-tile label>Quasar</q-item-tile>
      <q-item-tile sublabel>Empower your development skills</q-item-tile>
    </q-item-main>
    <q-item-side right icon="movie" />
  </q-item>

  <q-item-separator />

  <q-list-header>Movies</q-list-header>
  <q-item multiline>
    <q-item-side image="statics/parallax1.jpg" />
    <q-item-main>
      <q-item-tile label>Must-see places</q-item-tile>
      <q-item-tile sublabel lines="3">
        The world in which we live is full of wonderful places that most of us do not know
        they really exist. Here you can see some of those breathtaking places  around the world.
        Enjoy!
      </q-item-tile>
    </q-item-main>
    <q-item-side right icon="movie" />
  </q-item>
  <q-item multiline>
    <q-item-side image="statics/parallax2.jpg" />
    <q-item-main>
      <q-item-tile label>Building a Bridge</q-item-tile>
      <q-item-tile sublabel lines="5">
        A bridge is one of those things that are often taken for granted until you don’t have one,
        especially if you live on a rural property and there’s a creek between your house and the
        county road. John Doe had plans to build a new bridge along with building a new house on
        his property, but plans for the bridge were made top priority when a wayward truck carried
        too much weight over the old bridge and it collapsed.
      </q-item-tile>
    </q-item-main>
    <q-item-side right icon="movie" />
  </q-item>
</q-list>

电话簿列表

<q-list>
  <q-item>
    <q-item-side icon="phone" color="primary" />
    <q-item-main>
      <q-item-tile label>(650) 555 - 1234</q-item-tile>
      <q-item-tile sublabel>Mobile</q-item-tile>
    </q-item-main>
    <q-item-side right icon="chat_bubble" color="green" />
  </q-item>
  <q-item>
    <q-item-main inset>
      <q-item-tile label>(650) 555 - 2345</q-item-tile>
      <q-item-tile sublabel>Office</q-item-tile>
    </q-item-main>
    <q-item-side right icon="chat_bubble" />
  </q-item>
  <q-item>
    <q-item-main inset>
      <q-item-tile label>(650) 555 - 3456</q-item-tile>
      <q-item-tile sublabel>Home</q-item-tile>
    </q-item-main>
    <q-item-side right icon="chat_bubble" />
  </q-item>
  <q-item-separator inset />
  <q-item>
    <q-item-side icon="mail" color="primary" />
    <q-item-main>
      <q-item-tile label>john@doe.com</q-item-tile>
      <q-item-tile sublabel>Personal</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-main inset>
      <q-item-tile label>john.doe@some-company.com</q-item-tile>
      <q-item-tile sublabel>Office</q-item-tile>
    </q-item-main>
  </q-item>
</q-list>
数据表 步进器