リストインデックスReactコンポーネント

List Index Reactコンポーネントは、List Indexコンポーネントを表します。

リストインデックスのコンポーネント

以下のコンポーネントが含まれています。

ListIndex (リストインデックス)

リストインデックスのプロパティ

Prop	Type	Default	Description
<ListIndex> properties
init	boolean	true	リストインデックスの初期化
listEl	object string		関連するリストビュー要素。リストビュー要素のCSSセレクタを持つHTML要素または文字列。
indexes	array string	auto	インデックスを含む配列。渡されていない場合は、`listEl`パラメータで渡されたリストビュー要素の中の `item-divider` と `list-group-title` 要素に基づいて、自動的に生成されます。
scrollList	boolean	true	選択されたインデックスまで、関連するリストビューを自動的にスクロールします。
label	boolean	false	リストのインデックス上をスワイプすると、選択したインデックスのラベルバブルが表示されます。
iosItemHeight	number	14	単一のインデックスアイテムの高さ。これは、ダイナミックインデックスと、画面に収まるインデックスの数を計算するために必要です。iOSテーマの場合
mdItemHeight	number	14	単一のインデックス項目の高さ。ダイナミックインデックスの計算と、画面に収まるインデックス数の計算に必要です。MDテーマの場合
auroraItemHeight	number	14	単一のインデックス項目の高さです。ダイナミックインデックスの計算と、画面に収まるインデックスの数が必要になります。Auroraテーマの場合

インデックスイベント一覧

Event	Arguments	Description
<ListIndex> events
listIndexSelect	(itemContent)	Event will be triggered on index select rather by click or swiping. As an argument event handler receives selected index item content

リストインデックスメソッド

<ListIndex> methods
.update()	インデックス、サイズを再計算し、リストインデックスを再レンダリングする
.scrollListToIndex(itemContent)	指定されたインデックスの内容に合わせて関連リストをスクロールする

Examples

import React from 'react';
import { Page, Navbar, ListIndex, List, ListGroup, ListItem } from 'framework7-react';

export default () => {
  const onIndexSelect = (itemContent) => {
    console.log(itemContent);
  };
  return (
    
      
    <Page>
      <Navbar title="List Index" />
      <ListIndex
        indexes="auto"
        listEl=".list.contacts-list"
        scrollList={true}
        label={true}
        onListIndexSelect={onIndexSelect}
      />
      <List contactsList>
        <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>
      
    
  );
};