🔥 了解我们的新项目 t0ggles - 您最终的项目管理工具! 🔥

联系人列表 React 组件

联系人列表不是一个单独的组件,而只是使用列表视图(列表列表项 React 组件)的一种特殊情况。

示例

ContactsList.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
List,
ListGroup,
ListItem,
} from 'konsta/react';
export default function ContactsListPage() {
return (
<Page>
<Navbar
title="Contacts List"
/>
<List strongIos>
<ListGroup dividers={false}>
<ListItem title="A" groupTitle contacts />
<ListItem title="Aaron" contacts />
<ListItem title="Abbie" contacts />
<ListItem title="Adam" contacts />
<ListItem title="Adele" contacts />
<ListItem title="Agatha" contacts />
<ListItem title="Agnes" contacts />
<ListItem title="Albert" contacts />
<ListItem title="Alexander" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="B" groupTitle contacts />
<ListItem title="Bailey" contacts />
<ListItem title="Barclay" contacts />
<ListItem title="Bartolo" contacts />
<ListItem title="Bellamy" contacts />
<ListItem title="Belle" contacts />
<ListItem title="Benjamin" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="C" groupTitle contacts />
<ListItem title="Caiden" contacts />
<ListItem title="Calvin" contacts />
<ListItem title="Candy" contacts />
<ListItem title="Carl" contacts />
<ListItem title="Cherilyn" contacts />
<ListItem title="Chester" contacts />
<ListItem title="Chloe" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="V" groupTitle contacts />
<ListItem title="Vladimir" contacts />
</ListGroup>
</List>
</Page>
);
}
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.