清單 Svelte 元件

清單檢視是多功能且強大的使用者介面元件，在應用程式中經常可見。清單檢視會在可捲動的清單中顯示多列資料，這些資料可能會分成區段/群組。

清單檢視有許多用途

讓使用者瀏覽階層化結構的資料
顯示索引的項目清單
在視覺上不同的群組中顯示詳細資訊和控制項
顯示可選的選項清單

清單 Svelte 元件代表 Framework7 的清單檢視元件。

清單元件

包含下列元件

List - 主要清單檢視元素
ListGroup - 清單群組元素

清單屬性

屬性	類型	預設值	說明
<List> 屬性
ul	布林值	true	使用 `<ul>` 包裝子項目。建議在與巢狀 `<ListGroup>` 搭配使用時停用
inset	布林值		讓清單縮排。`insetIos` 和 `insetMd` 屬性可供特定主題版面使用
xsmallInset	布林值		當應用程式寬度 >= 480px 時讓清單縮排。`xsmallInsetIos` 和 `xsmallInsetMd` 屬性可供特定主題版面使用
smallInset	布林值		當應用程式寬度 >= 568px 時讓清單縮排。`smallInsetIos` 和 `smallInsetMd` 屬性可供特定主題版面使用
mediumInset	布林值		當應用程式寬度 >= 768px 時讓清單縮排。`mediumInsetIos` 和 `mediumInsetMd` 屬性可供特定主題版面使用
largeInset	布林值		當應用程式寬度 >= 1024px 時讓清單縮排。`largeInsetIos` 和 `largeInsetMd` 屬性可供特定主題版面使用
xlargeInset	布林值		當應用程式寬度 >= 1200px 時讓清單縮排。`xlargeInsetIos` 和 `xlargeInsetMd` 屬性可供特定主題版面使用
strong	布林值		為清單新增額外重點。`strongIos` 和 `strongMd` 屬性可供特定主題版面使用
outline	布林值		讓清單有輪廓（帶有邊框）。`outlineIos` 和 `outlineMd` 屬性可供特定主題版面使用
dividers	布林值		在清單項目之間新增分隔線（邊框）。`dividersIos` 和 `dividersMd` 屬性可供特定主題版面使用
mediaList	布林值	false	啟用媒體清單
linksList	布林值	false	啟用簡化的連結清單
simpleList	布林值	false	啟用簡化的單純清單
sortable	布林值	false	啟用可排序清單
sortableOpposite	布林值	false	在對側顯示可排序處理常式（在 LTR 中為左側）
sortableTapHold	布林值	false	讓清單項目在項目點選並按住（長按）時可排序。在此情況下，應用程式將依賴自訂的 `taphold` 事件。若要讓其正常運作，請務必也已啟用 `touch.tapHold: true` 應用程式參數
sortableEnabled	布林值	false	啟用可排序清單上的排序
sortableMoveElements	布林值		傳遞時，它將覆寫相同的 `sortable.moveElements` 全域應用程式參數。
menuList	布林值		啟用選單清單
accordion	布林值	false	啟用手風琴清單
accordionOpposite	布林值	false	在對側顯示手風琴人字形圖示（在 LTR 中為左側）
contactsList	布林值	false	透過新增必要的額外樣式類別來啟用聯絡人清單
form	布林值	false	在清單區塊上啟用 `<form>` 標籤，而非 `<div>`
formStoreData	布林值	false	為目前的表單啟用表單儲存
noChevron	布林值	false	移除巢狀清單項目連結上的「人字形」圖示
chevronCenter	布林值	false	將巢狀媒體清單項目上的「人字形」圖示設定在中央（垂直）
tab	布林值	false	當區塊應當做標籤使用時，新增額外的「標籤」類別
tabActive	布林值	false	當區塊做為標籤使用並使其成為活動標籤時，新增額外的「標籤-活動」類別
virtualList	布林值	false	啟用虛擬清單
virtualListParams	物件		具有虛擬清單參數的物件
<ListGroup> 屬性
mediaList	布林值	false	為此群組啟用媒體清單
sortable	布林值	false	為此群組啟用可排序清單
sortableTapHold	布林值	false	讓清單項目在項目點選並按住（長按）時可排序。在此情況下，應用程式將依賴自訂的 `taphold` 事件。若要讓其正常運作，請務必也已啟用 `touch.tapHold: true` 應用程式參數
simpleList	布林值	false	為此群組啟用簡化的單純清單

清單事件

事件	說明
<List> 事件
tabShow	當 List Block-Tab 變為可見/活動時，將觸發事件
tabHide	當 List Block-Tab 變為不可見/非活動時，將觸發事件
submit	當列表用作表單（啟用 `form` prop）時，在列表表單提交時觸發事件
<List> 可排序特定事件
sortableEnable	當啟用可排序模式時，將觸發事件
sortableDisable	當停用可排序模式時，將觸發事件
sortableSort	當使用者在新的位置釋放目前排序的元素後，將觸發事件。`event.detail` 將包含一個物件，其中包含 `from` 和 `to` 屬性，表示已排序列表項目的開始/新索引號碼
<List> 虛擬列表特定事件
virtualItemBeforeInsert	在將項目新增到虛擬文件片段之前，將觸發事件
virtualItemsBeforeInsert	在移除目前的 DOM 清單並插入新的文件之前，將觸發事件
virtualItemsAfterInsert	在插入包含項目的新文件片段後，將觸發事件
virtualBeforeClear	在移除目前的 DOM 清單並以新的文件片段取代之前，將觸發事件

List 插槽

List Svelte 元件（<List>）有額外的插槽可供自訂元素使用

before-list - 元素將插入在列表檢視的開頭，並在 <ul> 主列表之前
after-list - 元素將插入在列表檢視的結尾，並在 <ul> 主列表之後
list - 元素將插入在 <ul> 主列表元素內部

虛擬清單

有關虛擬列表的使用和範例，請查看虛擬列表 Svelte 元件文件。

可排序列表

有關可排序列表的使用和範例，請查看可排序 Svelte 元件文件。

手風琴列表

有關手風琴列表的使用和範例，請查看手風琴 Svelte 元件文件。

範例

list.svelte

<script>
  import {
    Navbar,
    Page,
    BlockTitle,
    Block,
    List,
    ListItem,
    ListGroup,
    Toggle,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="List View" />
  <Block>
    <p>
      Framework7 allows you to be flexible with list views (table views). You can make them as
      navigation menus, you can use there icons, inputs, and any elements inside of the list, and
      even make them nested:
    </p>
  </Block>
  <BlockTitle>Simple List</BlockTitle>
  <List dividersIos simpleList>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>
  <BlockTitle>Strong List</BlockTitle>
  <List dividersIos simpleList strong>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline List</BlockTitle>
  <List dividersIos simpleList strong outline>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Inset List</BlockTitle>
  <List dividersIos simpleList strong inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline Inset List</BlockTitle>
  <List dividersIos simpleList strong outline inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Simple Links List</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem title="Link 1" link="#" />
    <ListItem title="Link 2" link="#" />
    <ListItem title="Link 3" link="#" />
  </List>
  <BlockTitle>Data list, with icons</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem title="Ivan Petrov" after="CEO"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="John Doe" badge="5"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
  </List>
  <BlockTitle>Links, no icons</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" />
    <ListItem link="#" title="John Doe" />
    <ListItem groupTitle title="Group Title Here" />
    <ListItem link="#" title="Ivan Petrov" />
    <ListItem link="#" title="Jenna Smith" />
  </List>
  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List dividersIos outlineIos strongIos ul={false}>
    <ListGroup>
      <ListItem title="A" groupTitle />
      <ListItem title="Aaron " />
      <ListItem title="Abbie" />
      <ListItem title="Adam" />
    </ListGroup>
    <ListGroup>
      <ListItem title="B" groupTitle />
      <ListItem title="Bailey" />
      <ListItem title="Barclay" />
      <ListItem title="Bartolo" />
    </ListGroup>
    <ListGroup>
      <ListItem title="C" groupTitle />
      <ListItem title="Caiden" />
      <ListItem title="Calvin" />
      <ListItem title="Candy" />
    </ListGroup>
  </List>
  <BlockTitle>Mixed and nested</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem title="No icons here" />
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <svelte:fragment slot="media">
            <i class="icon icon-f7" />
            <i class="icon icon-f7" />
          </svelte:fragment>
        </ListItem>
        <ListItem title="No icons here" />
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon icon-f7" />
          <span slot="after">
            <Toggle />
          </span>
        </ListItem>
      </ul>
    </li>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon icon-f7" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Tablet inset</BlockTitle>
  <List dividersIos outlineIos strongIos mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </div>
  </List>

  <BlockTitle>Media Lists</BlockTitle>
  <Block>
    <p>
      Media Lists are almost the same as Data Lists, but with a more flexible layout for
      visualization of more complex data, like products, services, users, etc.
    </p>
  </Block>
  <BlockTitle>Songs</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem
      link="#"
      title="Yellow Submarine"
      after="$15"
      subtitle="Beatles"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
        width="80"
      />
    </ListItem>
    <ListItem
      link="#"
      title="Don't Stop Me Now"
      after="$22"
      subtitle="Queen"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
        width="80"
      />
    </ListItem>
    <ListItem
      link="#"
      title="Billie Jean"
      after="$16"
      subtitle="Michael Jackson"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
        width="80"
      />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem
      link="#"
      title="Facebook"
      after="17:14"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      link="#"
      title="John Doe (via Twitter)"
      after="17:11"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      link="#"
      title="Facebook"
      after="16:48"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      link="#"
      title="John Doe (via Twitter)"
      after="15:32"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
  </List>
  <BlockTitle>Something more simple</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem title="Yellow Submarine" subtitle="Beatles">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
        width="44"
      />
    </ListItem>
    <ListItem link="#" title="Don't Stop Me Now" subtitle="Queen">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
        width="44"
      />
    </ListItem>
    <ListItem title="Billie Jean" subtitle="Michael Jackson">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
        width="44"
      />
    </ListItem>
  </List>
</Page>

改善此文件

在此頁面

清單元件
清單屬性
清單事件
List 插槽
虛擬清單
可排序列表
手風琴列表
範例