Grid
The Grid component is used to quickly position and align ‘square’ components in a grid format. ‘Square’ here refers to any component that has x1
, x2
, y1
and y2
props. This includes the Section
component, the Rectangle
mark, and any custom component that you would want to create, given it has the props mentioned above.
<script>
import { Graphic, Rectangle, Grid } from '@snlab/florence'
const colors = ['red', 'blue', 'green', 'orange', 'yellow', 'purple']
let columns = 2
</script>
<div>
<label for="cols-slider">Columns:</label>
<input type="range" min="1" max="3" bind:value={columns} name="cols-slider" />
</div>
<Graphic width={200} height={200}>
<Grid numberOfCells={colors.length} {columns} let:cells>
{#each colors as color, i}
<Rectangle {...cells[i]} fill={color} />
{/each}
</Grid>
</Graphic>
Properties
Positioning
Prop | Required | Types | Default | Unit(s) |
---|---|---|---|---|
x1 | false |
any |
undefined |
Local coordinate |
x2 | false |
any |
undefined |
Local coordinate |
y1 | false |
any |
undefined |
Local coordinate |
y2 | false |
any |
undefined |
Local coordinate |
The Grid
positioning props behave the same way as the Section positioning props.
Grid settings
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
numberOfCells | true |
number |
undefined |
- |
rows | false |
number |
undefined |
Integer |
columns | false |
number |
undefined |
Integer |
padding | false |
`number | PaddingObject` | 0 |
numberOfCells
is the only required prop among the grid settings. If rows
and columns
are undefined
, values will be chosen automatically based on the number of cells and the aspect ratio result from the positioning props. If only rows
is defined, columns
will be calculated automatically and vice versa. Finally, if both rows
and columns
are defined, the Grid
component will throw an error if the numberOfCells
exceeds the number of cells.
padding
is used to create an outer padding for the entire grid, and works the same way as the padding
prop of the Section
component. Both can be specified as a Number
or an Object
, where padding={10}
is equivalent to padding={{ left: 10, right: 10, top: 10, bottom: 10 }}
and padding={{ left: 10 }}
is equivalent to padding={{ left: 10, right: 0, top: 0, bottom: 0 }}
.
For more information on padding, see the local coordinates documentation.
Slot Scope
Grid
exposes a value called cells
through its slot scope using the let:cells
syntax. The cells
Array
holds a series of objects in which the key is the ‘area name’ element in areas
array and the value is a position object that will be used to position the cells of the grid. This uses the native Svelte slot syntax. This cells
object is used to position the Grid
component’s children that form the cells of the Grid (i.e. Section
components).
For example, with the following prop values:
<Grid
numberOfCells={2}
let:cells
>
<!-- In here we have access to the cells object -->
</Grid>
the cells
array has the following format:
type Cells = Cell[]
interface Cell {
x1: number;
x2: number;
y1: number;
y2: number;
}