Grid Page
Overview
A page with a list of card items in a grid layout. Each card is a link to a new page where either detail or create view can be displayed.
Source code
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;
Usage
- Use a combination of
Grid
andCard
components to create a grid layout of cards. - Use the
Card
component to create a grid item. - To make the layout responsive, use the
Grid
component with theminColumnWidth
prop. - For a fixed number of columns, use the
Grid
component with thecolumns
prop.