Charles de Dreuille
177 lines
3.8 KiB
Plaintext
177 lines
3.8 KiB
Plaintext
import { CodeBlock } from '../components/CodeBlock';
|
|
import { PropsTable } from '../components/PropsTable';
|
|
import { spacePropsList } from '../utils/spaceProps';
|
|
|
|
# Grid
|
|
|
|
A layout component that helps to create simple column-based layouts as well as
|
|
more complex ones.
|
|
|
|
<CodeBlock
|
|
code={`import { Grid } from "@backstage/canon";
|
|
|
|
<Grid>
|
|
<Grid.Item>Hello World</Grid.Item>
|
|
</Grid>
|
|
`} />
|
|
|
|
## API reference
|
|
|
|
### Grid
|
|
|
|
This is the grid container component. It will help to define the number of
|
|
columns that will be used in the grid. You can also define the gap between the
|
|
columns. All values are responsive.
|
|
|
|
<PropsTable
|
|
data={{
|
|
columns: {
|
|
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
|
responsive: true,
|
|
},
|
|
gap: {
|
|
type: ['xs', 'sm', 'md', 'lg', 'xl'],
|
|
responsive: true,
|
|
},
|
|
children: {
|
|
type: 'ReactNode',
|
|
required: false,
|
|
},
|
|
className: {
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
style: {
|
|
type: 'CSSProperties',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
The grid component also accepts all the spacing props from the Box component.
|
|
|
|
<PropsTable data={spacePropsList} />
|
|
|
|
### Grid.Item
|
|
|
|
If you need more control over the columns, you can use the grid item
|
|
component. This will give you access to `rowSpan`, `colSpan`, `start` and
|
|
`end`. All values are responsive. This component is optional, you can use any
|
|
elements directly if you prefer.
|
|
|
|
<PropsTable
|
|
data={{
|
|
colSpan: {
|
|
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
|
|
responsive: true,
|
|
},
|
|
rowSpan: {
|
|
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
|
|
responsive: true,
|
|
},
|
|
start: {
|
|
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
|
responsive: true,
|
|
},
|
|
end: {
|
|
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
|
responsive: true,
|
|
},
|
|
children: {
|
|
type: 'ReactNode',
|
|
required: false,
|
|
},
|
|
className: {
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
style: {
|
|
type: 'CSSProperties',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Examples
|
|
|
|
### Simple grid
|
|
|
|
A simple grid with 3 columns and a gap of md.
|
|
|
|
<CodeBlock
|
|
code={`<Grid columns={3} gap="md">
|
|
<Box>Hello World</Box>
|
|
<Box>Hello World</Box>
|
|
<Box>Hello World</Box>
|
|
</Grid>
|
|
`}
|
|
/>
|
|
|
|
### Complex grid
|
|
|
|
You can also use the grid item to create more complex layouts. In this example
|
|
the first column will span 1 column and the second column will span 2 columns.
|
|
|
|
<CodeBlock
|
|
code={`<Grid columns={3} gap="md">
|
|
<Grid.Item colSpan={1}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
<Grid.Item colSpan={2}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
</Grid>
|
|
`}
|
|
/>
|
|
|
|
### Mixing rows and columns
|
|
|
|
The grid item component also supports the `rowSpan` prop, which allows you to
|
|
span multiple rows within the grid layout. In this example, the first item
|
|
will span 2 rows to achieve a dynamic and flexible grid structure.
|
|
|
|
<CodeBlock
|
|
code={`<Grid columns={3} gap="md">
|
|
<Grid.Item colSpan={1} rowSpan={2}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
<Grid.Item colSpan={2}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
<Grid.Item colSpan={2}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
</Grid>
|
|
`}
|
|
/>
|
|
|
|
### Responsive grid
|
|
|
|
The grid component also supports responsive values, making it easy to create
|
|
responsive designs.
|
|
|
|
<CodeBlock
|
|
code={`<Grid columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
|
|
<Grid.Item colSpan={{ xs: 1, md: 2 }}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
<Grid.Item colSpan={{ xs: 1, md: 1 }}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
</Grid>
|
|
`}
|
|
/>
|
|
|
|
### Start and End
|
|
|
|
The start and end props can be used to position the item in the grid.
|
|
|
|
<CodeBlock
|
|
code={`<Grid columns={3} gap="md">
|
|
<Grid.Item start={2} end={4}>
|
|
<Box>Hello World</Box>
|
|
</Grid.Item>
|
|
</Grid>
|
|
`}
|
|
/>
|