清單索引 React 元件
清單索引 React 元件代表 清單索引 元件。
清單索引元件
包含以下元件
ListIndex
List Index 屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| <ListIndex> 屬性 | |||
| init | 布林值 | true | 初始化 List Index |
| listEl | 物件 字串 | 相關的 List View 元件。HTMLElement 或 List View 元件的 CSS 選擇器的字串 | |
| indexes | 陣列 字串 | auto | 包含索引的陣列。如果未傳遞，則會根據 `listEl` 參數中傳遞的 List View 元件內的 `list-group-title` 元件自動產生。 |
| scrollList | 布林值 | true | 會自動將相關的 List View 捲動到選取的索引 |
| label | 布林值 | false | 在您滑動過 List Index 時，啟用包含選取索引的標籤泡泡 |
| iosItemHeight | 數字 | 14 | 單一索引項目高度。需要計算動態索引以及螢幕上可以容納多少個索引。適用於 iOS 主題 |
| mdItemHeight | 數字 | 14 | 單一索引項目高度。需要計算動態索引以及螢幕上可以容納多少個索引。適用於 MD 主題 |
List Index 事件
| 事件 | 引數 | 說明 |
|---|---|---|
| <ListIndex> 事件 | ||
| listIndexSelect | (itemContent) | 事件會在索引選取時觸發，無論是透過點擊或滑動。事件處理常式會接收選取的索引項目內容作為引數 |
List Index 方法
| <ListIndex> 方法 | |
|---|---|
| .update() | 重新計算索引、大小並重新呈現 List Index |
| .scrollListToIndex(itemContent) | 將相關的清單捲動到指定的索引內容 |
範例
list-index.jsx
import React from 'react';
import { Page, Navbar, List, ListGroup, ListItem, ListIndex } from 'framework7-react';
export default () => {
const onIndexSelect = (itemContent) => {
console.log(itemContent);
};
return (
<Page>
<Navbar title="List Index"></Navbar>
<ListIndex
indexes="auto"
listEl=".list.contacts-list"
scrollList={true}
label={true}
onListIndexSelect={onIndexSelect}
/>
<List contactsList strongIos dividersIos>
<ListGroup>
<ListItem title="A" groupTitle />
<ListItem title="Aaron" />
<ListItem title="Adam" />
<ListItem title="Aiden" />
<ListItem title="Albert" />
<ListItem title="Alex" />
<ListItem title="Alexander" />
<ListItem title="Alfie" />
<ListItem title="Archie" />
<ListItem title="Arthur" />
<ListItem title="Austin" />
</ListGroup>
<ListGroup>
<ListItem title="B" groupTitle />
<ListItem title="Benjamin" />
<ListItem title="Blake" />
<ListItem title="Bobby" />
</ListGroup>
<ListGroup>
<ListItem title="C" groupTitle />
<ListItem title="Caleb" />
<ListItem title="Callum" />
<ListItem title="Cameron" />
<ListItem title="Charles" />
<ListItem title="Charlie" />
<ListItem title="Connor" />
</ListGroup>
<ListGroup>
<ListItem title="D" groupTitle />
<ListItem title="Daniel" />
<ListItem title="David" />
<ListItem title="Dexter" />
<ListItem title="Dylan" />
</ListGroup>
<ListGroup>
<ListItem title="E" groupTitle />
<ListItem title="Edward" />
<ListItem title="Elijah" />
<ListItem title="Elliot" />
<ListItem title="Elliott" />
<ListItem title="Ethan" />
<ListItem title="Evan" />
</ListGroup>
<ListGroup>
<ListItem title="F" groupTitle />
<ListItem title="Felix" />
<ListItem title="Finlay" />
<ListItem title="Finley" />
<ListItem title="Frankie" />
<ListItem title="Freddie" />
<ListItem title="Frederick" />
</ListGroup>
<ListGroup>
<ListItem title="G" groupTitle />
<ListItem title="Gabriel" />
<ListItem title="George" />
</ListGroup>
<ListGroup>
<ListItem title="H" groupTitle />
<ListItem title="Harley" />
<ListItem title="Harrison" />
<ListItem title="Harry" />
<ListItem title="Harvey" />
<ListItem title="Henry" />
<ListItem title="Hugo" />
</ListGroup>
<ListGroup>
<ListItem title="I" groupTitle />
<ListItem title="Ibrahim" />
<ListItem title="Isaac" />
</ListGroup>
<ListGroup>
<ListItem title="J" groupTitle />
<ListItem title="Jack" />
<ListItem title="Jacob" />
<ListItem title="Jake" />
<ListItem title="James" />
<ListItem title="Jamie" />
<ListItem title="Jayden" />
<ListItem title="Jenson" />
<ListItem title="Joseph" />
<ListItem title="Joshua" />
<ListItem title="Jude" />
</ListGroup>
<ListGroup>
<ListItem title="K" groupTitle />
<ListItem title="Kai" />
<ListItem title="Kian" />
</ListGroup>
<ListGroup>
<ListItem title="L" groupTitle />
<ListItem title="Leo" />
<ListItem title="Leon" />
<ListItem title="Lewis" />
<ListItem title="Liam" />
<ListItem title="Logan" />
<ListItem title="Louie" />
<ListItem title="Louis" />
<ListItem title="Luca" />
<ListItem title="Lucas" />
<ListItem title="Luke" />
</ListGroup>
<ListGroup>
<ListItem title="M" groupTitle />
<ListItem title="Mason" />
<ListItem title="Matthew" />
<ListItem title="Max" />
<ListItem title="Michael" />
<ListItem title="Mohammad" />
<ListItem title="Mohammed" />
<ListItem title="Muhammad" />
</ListGroup>
<ListGroup>
<ListItem title="N" groupTitle />
<ListItem title="Nathan" />
<ListItem title="Noah" />
</ListGroup>
<ListGroup>
<ListItem title="O" groupTitle />
<ListItem title="Oliver" />
<ListItem title="Ollie" />
<ListItem title="Oscar" />
<ListItem title="Owen" />
</ListGroup>
<ListGroup>
<ListItem title="R" groupTitle />
<ListItem title="Reuben" />
<ListItem title="Riley" />
<ListItem title="Robert" />
<ListItem title="Ronnie" />
<ListItem title="Rory" />
<ListItem title="Ryan" />
</ListGroup>
<ListGroup>
<ListItem title="S" groupTitle />
<ListItem title="Samuel" />
<ListItem title="Sebastian" />
<ListItem title="Seth" />
<ListItem title="Sonny" />
<ListItem title="Stanley" />
</ListGroup>
<ListGroup>
<ListItem title="T" groupTitle />
<ListItem title="Teddy" />
<ListItem title="Theo" />
<ListItem title="Theodore" />
<ListItem title="Thomas" />
<ListItem title="Toby" />
<ListItem title="Tommy" />
<ListItem title="Tyler" />
</ListGroup>
<ListGroup>
<ListItem title="W" groupTitle />
<ListItem title="William" />
</ListGroup>
<ListGroup>
<ListItem title="Z" groupTitle />
<ListItem title="Zachary" />
</ListGroup>
</List>
</Page>
);
};