清單項目 Svelte 組件

清單項目組件

包含以下組件

ListItem - 主要清單項目元素

列表項目屬性

屬性	類型	預設值	說明
<ListItem> 屬性
標題	字串		列表項目標題
子標題	字串		列表項目子標題（僅限媒體清單）
文字	字串		列表項目文字（僅限媒體清單）
標頭	字串		列表項目標頭文字
頁尾	字串		列表項目頁尾文字
媒體	字串		列表項目媒體影像網址
後	字串		列表項目標籤
徽章	字串數字		列表項目徽章
徽章顏色	字串		列表項目徽章顏色。其中一種預設顏色
媒體項目	布林值		為目前的列表項目啟用媒體列表項目
群組標題	布林值		將列表項目轉換為列表群組標題
目標	布林值		列表項目連結目標屬性
無箭頭	布林值	否	移除列表項目連結上的「箭頭」圖示
箭頭置中	布林值	否	將媒體列表項目上的「箭頭」圖示設定在中央（垂直）
工具提示	字串		列表按鈕工具提示文字，在按鈕滑鼠移入/按下時顯示
工具提示觸發	字串	滑鼠移入	定義如何觸發（開啟）工具提示。可以是 `hover`、`click` 或 `manual`
<ListItem> 菜單列表特定屬性
已選取	布林值		菜單列表項目是否已選取（目前為作用中）
<ListItem> 滑動移除特定屬性
滑動移除	布林值		將列表項目轉換為滑動移除列表項目
滑動移除已開啟	布林值		定義滑動動作是否應開啟。請注意，同一時間只有一個滑動移除項目可以開啟
<ListItem> 手風琴特定屬性
手風琴項目	布林值	否	將列表項目轉換為手風琴列表項目
手風琴項目已開啟	布林值	否	使手風琴項目開啟
<ListItem> 可排序列表特定屬性
可排序	布林值		允許停用（當 `false`）特定列表項目的排序。請注意，這僅適用於列表中的第一個或最後一個項目，並且在您停用中間某些項目的可排序性時將無法正常運作。
<ListItem> 虛擬列表特定屬性
虛擬列表索引	數字		允許在虛擬列表中使用時傳遞列表項目索引（來自整個集合）。與可排序一起使用，以了解正確的已變更索引
<ListItem> 智慧型選取特定屬性
智慧型選取	布林值	否	啟用智慧型選取行為
smartSelectParams	物件		具有 Smart Select 參數的物件
<ListItem> 核取方塊和單選按鈕特定屬性
checkbox	布林值	否	啟用核取方塊項目
checkboxIcon	字串		允許指定核取方塊圖示位置 - 在清單項目開頭或結尾。可以是 `start` 或 `end`。預設核取方塊清單項目圖示顯示在清單項目開頭。
radio	布林值	否	啟用單選按鈕項目
radioIcon	字串		允許指定單選按鈕圖示位置 - 在清單項目開頭或結尾。可以是 `start` 或 `end`。預設單選按鈕清單項目圖示顯示在 iOS 主題的清單項目結尾，以及 MD 主題的清單項目開頭。
checked	布林值	否	核取方塊/單選按鈕輸入是否已選取
indeterminate	布林值		定義核取方塊輸入是否處於不確定狀態
name	字串		核取方塊/單選按鈕輸入名稱
value	字串數字		核取方塊/單選按鈕輸入值
readonly	布林值	否	核取方塊/單選按鈕輸入是否為唯讀
disabled	布林值	否	核取方塊/單選按鈕輸入是否已停用
required	布林值	否	核取方塊/單選按鈕輸入是否為必填
<ListItem> 導覽/路由器相關屬性
link	布林值字串		如果指定為字串，則啟用連結和連結 URL。與 `href` 屬性相同
tabLink	字串布林值		啟用標籤連結，並指定目標標籤的 CSS 選擇器 (如果指定為字串)
tabLinkActive	布林值		使此標籤連結處於作用中
href	字串布林值	#	要載入的頁面 URL。如果是布林值 `href="false"`，則不會新增 `href` 標籤
目標	字串		連結目標屬性的值，例如 `_blank`、`_self` 等。
view	字串		要載入頁面的檢視的 CSS 選擇器。或 `current` 以在目前檢視中載入。
external	布林值		啟用以繞過 Framework7 的連結點擊處理常式
back	布林值		啟用返回導覽連結
openIn	字串		允許將頁面路由開啟為對話框或面板。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布林值		強制載入頁面並忽略歷史記錄中的前一頁 (與 `back` 屬性一起使用)
reloadCurrent	布林值		重新載入新頁面，而非目前活動的頁面
reloadPrevious	布林值		以路由的新頁面取代歷史記錄中的前一頁面
reloadAll	布林值		載入新頁面，並從歷史記錄和 DOM 中移除所有前一頁面
reloadDetail	布林值		在主從檢視中重新載入詳細資料頁面
animate	布林值		停用頁面動畫
transition	字串		自訂頁面轉場的名稱
ignoreCache	布林值		忽略快取
routeTabId	字串		可路由的標籤 ID
routeProps	物件		包含附加屬性的物件，這些屬性將傳遞至目標路由元件
preventRouter	布林值	否	如果設定，Framework7 路由器將不會處理它
<ListItem> 動作相關屬性
panelOpen	字串布林值		按一下時開啟的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
panelClose	字串布林值		按一下時關閉面板
panelToggle	字串布林值		按一下時切換的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
actionsOpen	字串布林值		按一下時開啟的動作表單 CSS 選擇器
actionsClose	字串布林值		按一下時關閉的動作表單 CSS 選擇器。或布林值屬性，用於關閉目前開啟的動作表單
popupOpen	字串布林值		按一下時開啟的快顯視窗 CSS 選擇器
popupClose	字串布林值		按一下時關閉的快顯視窗 CSS 選擇器。或布林值屬性，用於關閉目前開啟的快顯視窗
popoverOpen	字串布林值		按一下時開啟的浮動視窗 CSS 選擇器
popoverClose	字串布林值		按一下時關閉的浮動視窗 CSS 選擇器。或布林值屬性，用於關閉目前開啟的浮動視窗
sheetOpen	字串布林值		按一下時開啟的表單模式 CSS 選擇器
sheetClose	字串布林值		按一下時關閉的表單模式 CSS 選擇器。或布林值屬性，用於關閉目前開啟的表單模式
loginScreenOpen	字串布林值		按一下時開啟的登入畫面 CSS 選擇器
loginScreenClose	字串布林值		按一下時關閉的登入畫面 CSS 選擇器。或布林值屬性，用於關閉目前開啟的登入畫面
sortableEnable	字串布林值		按一下時啟用的可排序清單 CSS 選擇器
sortableDisable	字串布林值		在點擊時要停用的可排序清單的 CSS 選擇器。或用於關閉目前開啟的可排序清單的布林屬性
sortableToggle	字串布林值		在點擊時要切換的可排序清單的 CSS 選擇器。或用於切換目前開啟/關閉的可排序清單的布林屬性
searchbarEnable	字串布林值		在點擊時要啟用的可展開搜尋列的 CSS 選擇器。或用於啟用第一個找到的搜尋列的布林屬性
searchbarDisable	字串布林值		在點擊時要停用的可展開搜尋列的 CSS 選擇器。或用於停用第一個找到的搜尋列的布林屬性
searchbarToggle	字串布林值		在點擊時要切換的可展開搜尋列的 CSS 選擇器。或用於切換第一個找到的搜尋列的布林屬性
searchbarClear	字串布林值		在點擊時要清除的可展開搜尋列的 CSS 選擇器。或用於清除第一個找到的搜尋列的布林屬性
cardOpen	字串布林值		在點擊時要開啟的可展開卡片的 CSS 選擇器。或用於開啟第一個找到的可展開卡片的布林屬性
cardClose	字串布林值		在點擊時要關閉的可展開卡片的 CSS 選擇器。或用於關閉目前開啟的可展開卡片的布林屬性
cardPreventOpen	布林值		點擊具有此屬性的元素不會開啟其父可展開卡片

清單項目事件

事件	說明
<ListItem> 事件
click	當使用者點擊清單項目時會觸發事件
change	當清單項目輸入 (單選按鈕或核取方塊) 發生「變更」事件時會觸發事件
滑動移除	當您移動滑動刪除元素時會觸發事件。第一個處理函數引數包含具有目前開啟進度百分比的 `progress` 物件
swipeoutOpen	當滑動刪除元素開始其開啟動畫時會觸發事件
滑動移除已開啟	當滑動刪除元素完成其開啟動畫後會觸發事件
swipeoutClose	當滑動刪除元素開始其關閉動畫時會觸發事件
swipeoutClosed	當滑動刪除元素完成其關閉動畫後會觸發事件
swipeoutDelete	當滑動刪除元素開始其刪除動畫後會觸發事件
swipeoutDeleted	當滑動刪除元素完成其刪除動畫並在從 DOM 中移除之前會觸發事件
accordionBeforeOpen	當手風琴內容開始其開啟動畫之前會觸發事件。第一個處理函數引數接收 `prevent` 函數，在呼叫時會防止手風琴開啟。
手風琴開啟	手風琴內容開始開啟動畫時觸發事件。
手風琴已開啟	手風琴內容完成開啟動畫後觸發事件。
手風琴關閉前	手風琴內容開始關閉動畫前觸發事件。第一個處理函數參數接收 `prevent` 函數，呼叫時會防止手風琴關閉。
手風琴關閉	手風琴內容開始關閉動畫時觸發事件。
手風琴已關閉	手風琴內容完成關閉動畫後觸發事件。

清單項目插槽

清單項目 Svelte 元件 (<ListItem>) 有其他插槽可供自訂元素使用

root-start - 元素會插入在 <li> 元素的開頭
root / root-end - 元素會插入在 <li> 元素的結尾
content-start - 元素會插入在 <div class="item-content"> 元素的開頭
content / content-end - 元素會插入在 <div class="item-content"> 元素的結尾
inner-start - 元素會插入在 <div class="item-inner"> 元素的開頭
default / inner / inner-end - 元素會插入在 <div class="item-inner"> 元素的結尾
media - 元素會插入在 <div class="item-media"> 元素內部
before-title - 元素會插入在 <div class="item-title"> 元素之前
title - 元素會插入在 <div class="item-title"> 元素內部
after-title - 元素會插入在 <div class="item-title"> 元素之後
subtitle - 元素會插入在 <div class="item-subtitle"> 元素內部
text - 元素會插入在 <div class="item-text"> 元素內部
header - 元素會插入在 <div class="item-header"> 元素內部
footer - 元素會插入在 <div class="item-footer"> 元素內部
after-start - 元素會插入在 <div class="item-after"> 元素的開頭
after / after-end - 元素會插入在 <div class="item-after"> 元素的結尾

<List mediaList>
  <ListItem
    link="/home/"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"
    >
      <img src="path-to-my-image.jpg" slot="media">
      <div slot="root-start">Root Start</div>
      <div slot="root">Root End</div>
      <div slot="content-start">Content Start</div>
      <div slot="content">Content End</div>
      <div slot="media-start">Media Start</div>
      <div slot="media">Media</div>
      <span slot="after-start">After Start</span>
      <span slot="after">After End</span>
      <div slot="inner-start">Inner Start</div>
      <div slot="inner">Inner End</div>
      <div slot="before-title">Before Title</div>
      <div slot="after-title">After Title</div>
  </ListItem>
</List>

<!-- Renders to: -->

<div class="list media-list">
  <ul>
    <li>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg">
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div>Before Title</div>
              <div class="item-title">Item Title</div>
              <div>After Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner End</div>
          </div>
          <div>Content End</div>
        </div>
      </a>
      <div>Root End</div>
    </li>
  </ul>
</div>

範例

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>

改善此文件

在此頁面上

清單項目組件
列表項目屬性
清單項目事件
清單項目插槽
範例