QList 和 QItem 是一組元件，可以協同工作，以垂直方式將多個行項目呈現為單一連續元素。它們最適合顯示相似的資料類型作為資訊列，例如聯絡人列表、播放列表或選單。每一列都稱為一個項目 (Item)。QItem 也可以在 QList 之外使用。

列表可以封裝項目或類似項目的元件，例如 QExpansionItem 或 QSlideItem。此外，QSeparator 可用於分隔章節，在需要時使用。

列表項目具有以下預先建立的子元件

• QItemSection - 項目區段對於特定內容有多種用途。它們透過 avatar、thumbnail 和 side 屬性控制。在沒有屬性的情況下，它將呈現 QItem 的主要區段（跨越所有可用空間）。
• QItemLabel - 項目標籤對於 QItemSection 內預定義的文字內容類型，或對於 QList 本身的標頭式內容非常有用。

用法

基本

QItemSection

啟用狀態

QItemLabel

更深入的範例

為了在以下範例中進行示範，我們使用 active 屬性而不是 QItem 的路由器屬性 (to、exact)。UMD 沒有 Vue Router，因此您無法在 Codepen/jsFiddle 中使用它。

連接到 Vue Router

您可以透過繫結到 QItem 的 <router-link> 屬性，將 QItem 與 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>

您也可以延遲、取消或重新導向導航，如下所示。有關以下使用的 @click 事件的更深入描述，請參閱頁面頂部的 QItem API 卡片。