Cell

import { Cell } from "cx-diagrams"

The Cell component is used to mark a rectangular area on the diagram using its width and height properties to provide boundaries to Shapes and other CxJS SVG components. Cells participate in layout Flows. Margin properties such as ms and me are used to add distance between cells.

<Diagram center showGrid unitSize={48}>
    <Flow direction="right">
        <Cell width={2}>
            <Rectangle fill="red" />
        </Cell>
        <Cell height={2} ms={1}>
            <Ellipse fill="green" />
        </Cell>
        <Cell height={2} ms={1} mt={-1}>
            <Rectangle stroke="blue" fill="transparent" />
        </Cell>
    </Flow>
</Diagram>

Configuration

Property	Description	Type
height	Height of the cell. Default value is 1.	number
width	Width of the cell. Default value is 1.	number
margin	Margin around the cell.	number
mb	Bottom margin.	number
me	End margin in the direction of the flow.	number
ml	Left margin.	number
mr	Right margin.	number
ms	Start margin in the direction of the flow.	number
mt	Top margin.	number
mx	Horizontal margin.	number
my	Vertical margin.	number