贊助商成為贊助商

清單項目 React 元件

清單項目元件

包含下列元件

清單項目屬性

屬性類型預設值說明
<ListItem> 屬性
標題字串清單項目標題
副標題字串清單項目副標題（僅限媒體清單）
文字字串清單項目文字（僅限媒體清單）
標頭字串清單項目標頭文字
頁尾字串清單項目頁尾文字
媒體字串清單項目媒體圖片網址
之後字串清單項目標籤
徽章字串
數字		清單項目徽章
徽章顏色字串清單項目徽章顏色。其中一個 預設顏色
媒體項目布林值啟用目前清單項目的媒體清單項目
群組標題布林值將清單項目轉換為清單群組標題
目標布林值清單項目連結目標屬性
無箭頭布林值false移除清單項目連結上的「箭頭」圖示
箭頭置中布林值false將媒體清單項目上的「箭頭」圖示設定在中央（垂直）
工具提示字串清單按鈕 工具提示 文字，在按鈕滑鼠移入/按下時顯示
工具提示觸發器字串滑鼠移入定義如何觸發（開啟）工具提示。可以是 滑鼠移入、按一下 或 手動
<ListItem> 選單清單特定屬性
已選取布林值選單清單項目是否已選取（目前為作用中）
<ListItem> 滑動刪除特定屬性
滑動刪除布林值將清單項目轉換為 滑動刪除清單項目
滑動刪除已開啟布林值定義是否開啟滑動動作。請注意，一次只能開啟一個滑動刪除項目
<ListItem> 手風琴特定屬性
手風琴項目布林值false將清單項目轉換為 手風琴清單項目
手風琴項目已開啟布林值false開啟手風琴項目
<ListItem> 可排序清單特定屬性
可排序布林值允許停用特定清單項目的排序（false 時）。請注意，這只對清單中的第一個或最後一個項目有意義且有效，如果停用中間某些項目的可排序功能，將無法正確運作。
<ListItem> 虛擬清單特定屬性
虛擬清單索引數字在虛擬清單中使用時，允許傳遞清單項目索引（來自整個集合）。與可排序功能一起使用時，可得知正確的已變更索引
<ListItem> 智慧選取特定屬性
智慧選取布林值false啟用智慧選取行為
智慧選取參數物件具有 Smart Select 參數 的物件
<ListItem> 核取方塊和單選按鈕特定屬性
checkbox布林值false啟用核取方塊項目
checkboxIcon字串允許指定核取方塊圖示位置 - 在項目清單的開頭或結尾。可以是 start 或 end。預設核取方塊項目圖示顯示在項目清單的開頭。
radio布林值false啟用單選按鈕項目
radioIcon字串允許指定單選按鈕圖示位置 - 在項目清單的開頭或結尾。可以是 start 或 end。預設單選按鈕項目圖示顯示在 iOS 主題的項目清單結尾，以及 MD 主題的項目清單開頭。
checked布林值false核取方塊/單選按鈕輸入是否已勾選
defaultChecked布林值定義核取方塊輸入是否已勾選，針對非受控元件的情況
indeterminate布林值定義核取方塊輸入是否處於不確定狀態
name字串核取方塊/單選按鈕輸入名稱
value字串
數字		核取方塊/單選按鈕輸入值
readonly布林值false核取方塊/單選按鈕輸入是否為唯讀
disabled布林值false核取方塊/單選按鈕輸入是否已停用
required布林值false核取方塊/單選按鈕輸入是否為必填
<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 中移除所有前一頁面
重新載入詳細資料布林值在主從檢視中重新載入詳細資料頁面
動畫布林值停用頁面動畫
轉場字串自訂頁面轉場 的名稱
忽略快取布林值忽略快取
路由標籤 ID字串可路由的標籤 ID
路由屬性物件包含其他屬性的物件，將傳遞給目標路由元件
防止路由布林值false如果設定，則 Framework7 路由器不會處理它
<ListItem> 動作相關屬性
面板開啟字串
布林值		按一下時開啟的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 left 或 right。
面板關閉字串
布林值		按一下時關閉面板
面板切換字串
布林值		按一下時切換的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 left 或 right。
動作開啟字串
布林值		按一下時開啟的操作表 CSS 選擇器
動作關閉字串
布林值		按一下時關閉的操作表 CSS 選擇器。或布林屬性，用於關閉目前開啟的操作表
快顯視窗開啟字串
布林值		按一下時開啟的快顯視窗 CSS 選擇器
快顯視窗關閉字串
布林值		按一下時關閉的快顯視窗 CSS 選擇器。或布林屬性，用於關閉目前開啟的快顯視窗
浮動視窗開啟字串
布林值		按一下時開啟的浮動視窗 CSS 選擇器
浮動視窗關閉字串
布林值		按一下時關閉的浮動視窗 CSS 選擇器。或布林屬性，用於關閉目前開啟的浮動視窗
圖表開啟字串
布林值		按一下時開啟的圖表模式 CSS 選擇器
圖表關閉字串
布林值		按一下時關閉的圖表模式 CSS 選擇器。或布林屬性，用於關閉目前開啟的圖表模式
登入畫面開啟字串
布林值		按一下時開啟的登入畫面 CSS 選擇器
登入畫面關閉字串
布林值		按一下時關閉的登入畫面 CSS 選擇器。或布林屬性，用於關閉目前開啟的登入畫面
可排序清單啟用字串
布林值		按一下時啟用的可排序清單 CSS 選擇器
可排序清單停用字串
布林值		按一下時停用的可排序清單 CSS 選擇器。或布林屬性，用於關閉目前開啟的可排序清單
可排序清單切換字串
布林值		按一下時切換的可排序清單 CSS 選擇器。或布林屬性，用於切換目前開啟/關閉的可排序清單
可擴充搜尋列啟用字串
布林值		按一下時啟用的可擴充搜尋列 CSS 選擇器。或布林屬性，用於啟用第一個找到的搜尋列
searchbarDisable字串
布林值		可展開搜尋列的 CSS 選擇器，在點擊時停用。或布林值屬性，用於停用第一個找到的可展開搜尋列
searchbarToggle字串
布林值		可展開搜尋列的 CSS 選擇器，在點擊時切換。或布林值屬性，用於切換第一個找到的可展開搜尋列
searchbarClear字串
布林值		可展開搜尋列的 CSS 選擇器，在點擊時清除。或布林值屬性，用於清除第一個找到的可展開搜尋列
cardOpen字串
布林值		可展開卡片的 CSS 選擇器，在點擊時開啟。或布林值，用於開啟第一個找到的可展開卡片
cardClose字串
布林值		可展開卡片的 CSS 選擇器，在點擊時關閉。或布林值屬性，用於關閉目前已開啟的可展開卡片
cardPreventOpen布林值點擊具有此屬性的元素，不會開啟其父可展開卡片

清單項目事件

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

列表項目插槽

列表項目 React 元件 (<ListItem>) 有額外的插槽可供自訂元素使用

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

範例

list.jsx
import React from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  BlockFooter,
  Block,
  List,
  ListItem,
  ListGroup,
  Icon,
  Toggle,
} from 'framework7-react';

export default () => (
  <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">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="John Doe" badge="5">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="John Doe" after="Cleaner">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, Header, Footer</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" header="Name" title="John Doe" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <Icon slot="media" 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>
      <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">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="No icons here" />
      <li>
        <ul>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="icon-f7" />
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="No icons here" />
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="icon-f7" />
            <Toggle slot="after" />
          </ListItem>
        </ul>
      </li>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="With toggle">
        <Icon slot="media" icon="icon-f7" />
        <Toggle slot="after" />
      </ListItem>
    </List>

    <BlockTitle>Tablet inset</BlockTitle>
    <List dividersIos outlineIos strongIos mediumInset>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <BlockFooter slot="after-list">
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </BlockFooter>
    </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, user, 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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
          width="44"
        />
      </ListItem>
    </List>
  </Page>
);
改善此文件
在此頁面上