贊助商成為贊助商

列出 React 組件

列表檢視是多功能且強大的使用者介面組件，經常在應用程式中找到。列表檢視以可捲動的清單呈現資料，清單包含多個列，且可能分為多個區段/群組。

列表檢視有許多用途

列表 React 組件代表 Framework7 的 列表檢視 組件。

列表組件

包含下列組件

列表屬性

屬性類型預設值說明
<List> 屬性
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當清單區塊標籤變得可見/活動時，將觸發事件
tabHide當清單區塊標籤變得不可見/非活動時，將觸發事件
submit當清單用作表單（啟用 form 屬性）時，將在清單表單提交時觸發事件
<List> 特定的可排序事件
sortableEnable當啟用可排序模式時，將觸發事件
sortableDisable當停用可排序模式時，將觸發事件
sortableSort當使用者釋放目前在新的位置排序的元素後，將觸發事件。event.detail 將包含一個物件，其中包含 from 和 to 屬性，以及排序清單項目的開始/新索引編號
<List> 虛擬清單特定事件
virtualItemBeforeInsert在項目加入到虛擬文件片段之前觸發事件
virtualItemsBeforeInsert在移除目前的 DOM 清單後，並在插入新的文件之前觸發事件
virtualItemsAfterInsert在插入含有項目的新文件片段後觸發事件
virtualBeforeClear在移除目前的 DOM 清單並以新的文件片段取代之前觸發事件

清單插槽

清單 React 元件 (<List>) 有額外的插槽可供自訂元素使用

虛擬列表

有關虛擬清單的使用方式和範例，請查看 虛擬清單 React 元件 文件。

可排序清單

有關可排序清單的使用方式和範例，請查看 可排序 React 元件 文件。

手風琴清單

有關手風琴清單的使用方式和範例，請查看 手風琴 React 元件 文件。

範例

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>
);
改善此文件
在此頁面