列表页
概览
一个显示项目列表的页面。每个项目都是一个链接，指向一个新页面，可在该页面中显示详情或创建视图。
源代码
import React from 'react';
import { Card, EmptySearchResult, FilterInput, Icon, LinkButton, Stack } from '@grafana/ui';
import { Data } from '@site/src/components/templates/GridPage/types';
interface ListPageProps {
data: Data;
query: string;
changeQuery: (query: string) => void;
}
export const ListPage = ({ data, query, changeQuery }: ListPageProps) => {
return (
<Stack direction={'column'} gap={2}>
<Stack gap={2}>
<FilterInput placeholder="Search by name" autoFocus={true} value={query} onChange={changeQuery} />
<LinkButton href="#" variant="primary">
Create item
</LinkButton>
</Stack>
{data.length ? (
data.map((item) => {
return (
<Card key={item.name} href={'#'}>
<Card.Heading>{item.displayName}</Card.Heading>
<Card.Meta>OAuth</Card.Meta>
<Card.Figure>
<Icon name={item.icon} size={'xxxl'} />
</Card.Figure>
</Card>
);
})
) : (
<EmptySearchResult>No results matching your query</EmptySearchResult>
)}
</Stack>
);
};
export default ListPage;
用法
- 使用
Stack组件结合column方向和Card组件来创建列表布局。 - 使用
Card组件创建列表项。 - 显示空状态时，使用
EmptySearchResult组件。 - 如果存在过滤器，主要操作应位于过滤器之后，在页面的右侧。