Align

Usage of _align and _verticalAlign attribute

Source

align.tsx

import { Shape } from "@dinghy/base-components";

export default function App() {
    return (
        <Shape _title="Align Example" _direction="vertical">
            <Shape _title="Entity">
                <Shape _align="left" _verticalAlign="top">left top</Shape>
                <Shape _align="center" _verticalAlign="middle">
                    center middle
                </Shape>
                <Shape _align="right" _verticalAlign="bottom">
                    right bottom
                </Shape>
            </Shape>
            <Shape _title="Container">
                <Shape _align="left" _verticalAlign="top">
                    left top
                    <Shape>child</Shape>
                </Shape>
                <Shape _align="center" _verticalAlign="middle">
                    center middle
                    <Shape>child</Shape>
                </Shape>
                <Shape _align="right" _verticalAlign="bottom">
                    right bottom
                    <Shape>child</Shape>
                </Shape>
            </Shape>
        </Shape>
    );
}

Diagram