asciitorium/dist/examples/AlignmentBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Row, Text } from '../index.js';
import { BaseStyle } from './constants.js';
/**
 * Component Alignment Basics
 *
 * Guide to alignment system using 'align'.
 */
export const AlignmentBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "Align & Gap Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Align Property" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 Parent 'align' - Groups ALL children and positions them together \u00B6 \u2022 9 values: top-left, top, top-right, center-left, center, \u00B6 center-right, bottom-left, bottom, bottom-right \u00B6" }), _jsx(Text, { width: "90%", gap: { top: 1 }, children: "Align Examples" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6, bottom: 1 }, children: "All children are grouped and positioned together:" }), _jsxs(Row, { width: "90%", align: "center", gap: { bottom: 1 }, children: [_jsxs(Row, { width: 18, height: 9, border: true, label: "row, center", align: "center", children: [_jsx(Text, { border: true, children: "A" }), _jsx(Text, { border: true, children: "B" }), _jsx(Text, { border: true, children: "C" })] }), _jsxs(Column, { width: 18, height: 9, border: true, label: "column, center", align: "center", children: [_jsx(Text, { border: true, children: "A" }), _jsx(Text, { border: true, children: "B" }), _jsx(Text, { border: true, children: "C" })] }), _jsxs(Row, { width: 18, height: 9, border: true, label: "bottom-left", align: "bottom-left", children: [_jsx(Text, { border: true, children: "A" }), _jsx(Text, { border: true, children: "B" }), _jsx(Text, { border: true, children: "C" })] })] }), _jsx(Text, { width: "90%", children: "Gap Property" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6, bottom: 1 }, children: "\u2022 Child 'gap' - Adds spacing around individual children \u00B6 \u2022 Format: gap={{ top: 1, bottom: 2, left: 3, right: 4 }} \u00B6 \u2022 Can use any combination of top, bottom, left, right \u00B6 \u2022 Works independently from parent alignment \u00B6" })] }));
};