asciitorium/dist/examples/TextBasics.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';
/**
 * Text Component Basics
 *
 * Guide to using the Text component with textAlign and other properties.
 */
export const TextBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "Text Component Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Common Properties" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6 }, typewriter: true, children: "\u2022 textAlign \u2014 Position text within component (9-point grid) \u00B6 \u2022 wrap \u2014 Enable/disable text wrapping (default: true) \u00B6 \u2022 scrollable \u2014 Enable scrolling for long content (default: false) \u00B6 \u2022 typewriter \u2014 Enable typewriter effect (default: false) \u00B6 \u2022 typewriterSpeed \u2014 Speed of typewriter effect (chars per second) \u00B6 \u2022 typewriterPauseFactor \u2014 Pause multiplier after periods (default: 10) \u00B6 \u2022 \\\u00B6 \u2014 use \\\u00B6 to insert a line break within text \u00B6" }), _jsx(Text, { width: "90%", children: "Text Alignment" }), _jsx(Line, { width: "90%" }), _jsxs(Row, { width: 15, align: "center", children: [_jsx(Text, { height: 5, width: 5, border: true, textAlign: "top-left", children: "A" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "top", children: "B" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "top-right", children: "C" })] }), _jsxs(Row, { width: 15, align: "center", children: [_jsx(Text, { height: 5, width: 5, border: true, textAlign: "left", children: "D" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "center", children: "E" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "right", children: "F" })] }), _jsxs(Row, { width: 15, align: "center", children: [_jsx(Text, { height: 5, width: 5, border: true, textAlign: "bottom-left", children: "G" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "bottom", children: "H" }), _jsx(Text, { width: 5, height: 5, border: true, textAlign: "bottom-right", children: "I" })] })] }));
};