跳到主要内容

网格页面

概述​

一个以网格布局显示卡片列表的页面。每张卡片都是一个链接，可跳转到显示详细信息或创建视图的新页面。

身份验证

管理您的身份验证设置并配置单点登录。

GitHub

OAuth
已启用

GitLab

OAuth
已启用

Google

OAuth
已启用

通用 OAuth

OAuth
未启用

Grafana

OAuth
已启用

Azure AD

OAuth
未启用

Okta

OAuth
未启用

源代码​

import React from 'react';
import { Card, Badge, Icon, Grid } from '@grafana/ui';
import { Data } from '@site/src/components/templates/GridPage/types';

interface CardListPageProps {
  data: Data;
}

export const GridPage = ({ data }: CardListPageProps) => {
  return (
    <Grid gap={3} minColumnWidth={34}>
      {data.map(({ displayName, name, enabled, icon }) => (
        <Card href={'#'} key={name}>
          <Card.Heading>{displayName}</Card.Heading>
          <Card.Meta>OAuth</Card.Meta>
          <Card.Figure>
            <Icon name={icon} size={'xxxl'} />
          </Card.Figure>
          <Card.Actions>
            <Badge text={enabled ? 'Enabled' : 'Not enabled'} color={enabled ? 'green' : 'blue'} />
          </Card.Actions>
        </Card>
      ))}
    </Grid>
  );
};

export default GridPage;

用法​

  • 结合使用 Grid 和 Card 组件来创建卡片网格布局。
  • 使用 Card 组件创建网格项。
  • 为了使布局响应式，请使用带有 minColumnWidth 属性的 Grid 组件。
  • 对于固定列数的布局，请使用带有 columns 属性的 Grid 组件。

视觉指南​

Figma 设计​