asciitorium/dist/examples/ComponentBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Component, Text } from "../index.js";
import { BaseStyle } from './constants.js';
/**
 * Component Basics
 *
 * Guide to creating custom components in asciitorium.
 */
export const ComponentBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "Component Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Common Component Properties" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", children: "All components extend the base Component class. It provides a bunch of stuff:" }), _jsx(Text, { width: "90%", gap: { top: 1, left: 6 }, children: "\u2022 width \u2014 number | percentage \u00B6 \u2022 height \u2014 number | percentage \u00B6 \u2022 border \u2014 default is false \u00B6 \u2022 label \u2014 title for the component \u00B6 \u2022 align \u2014 align component's children \u00B6 \u2022 gap \u2014 Spacing within the component \u00B6 \u2022 background \u2014 character to use as fill \u00B6 \u2022 hotkey \u2014 keyboard shortcut to focus component \u00B6 \u2022 visible \u2014 component visibility \u00B6" }), _jsx(Component, { gap: 1, width: 32, height: 5, label: "Component", align: "center", border: true })] }));
};