Contacts List React 组件
Contacts List 不是一个独立组件,只是 <List> 和 <ListItem> 组件特定使用案例。
Contacts List 属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
<List> 属性 | |||
contactsList | 布尔值 | false | 为 Contacts List 添加所需的其他样式 |
示例
contacts-list.jsx
import React from 'react';
import { Navbar, Page, List, ListGroup, ListItem } from 'framework7-react';
export default () => (
<Page>
<Navbar title="Contacts List"></Navbar>
<List contactsList strongIos>
<ListGroup>
<ListItem title="A" groupTitle />
<ListItem title="Aaron" />
<ListItem title="Abbie" />
<ListItem title="Adam" />
<ListItem title="Adele" />
<ListItem title="Agatha" />
<ListItem title="Agnes" />
<ListItem title="Albert" />
<ListItem title="Alexander" />
</ListGroup>
<ListGroup>
<ListItem title="B" groupTitle />
<ListItem title="Bailey" />
<ListItem title="Barclay" />
<ListItem title="Bartolo" />
<ListItem title="Bellamy" />
<ListItem title="Belle" />
<ListItem title="Benjamin" />
</ListGroup>
<ListGroup>
<ListItem title="C" groupTitle />
<ListItem title="Caiden" />
<ListItem title="Calvin" />
<ListItem title="Candy" />
<ListItem title="Carl" />
<ListItem title="Cherilyn" />
<ListItem title="Chester" />
<ListItem title="Chloe" />
</ListGroup>
<ListGroup>
<ListItem title="V" groupTitle />
<ListItem title="Vladimir" />
</ListGroup>
</List>
</Page>
);