asciitorium
Version:
an ASCII CLUI framework
19 lines (18 loc) • 2.23 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Row, Text, Button, State, BarSlider, DotSlider, ProgressBarSlider, GaugeSlider, } from '../index.js';
import { BaseStyle } from './constants.js';
/**
* Navigation Basics
*
* Guide to keyboard navigation and focus management in asciitorium.
*/
export const NavigationBasics = () => {
const counter = new State(5);
return (_jsxs(Column, { style: BaseStyle, label: "Navigation Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Navigation Keys" }), _jsx(Line, { width: "90%" }), _jsxs(Text, { width: "90%", gap: { bottom: 1 }, children: ["Asciitorium uses [Tab] + [Tab+Shift] to move between components. Focused components use a '", '>', "' to indicate they have focus."] }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 Tab \u2014 focus on next focusable component \u00B6 \u2022 Shift+Tab \u2014 focus on previous focusable component \u00B6 \u2022 Space \u2014 press button \u00B6" }), _jsx(Text, { width: "90%", gap: { bottom: 1 }, children: "Try navigating between these two buttons using [Tab], [Shift+Tab]" }), _jsxs(Column, { width: "90%", align: "center", gap: { bottom: 1 }, children: [_jsx(ProgressBarSlider, { width: 50, align: "center", gap: { bottom: 1 }, value: counter, min: 0, max: 20, readonly: true }), _jsx(BarSlider, { width: 50, align: "center", gap: { bottom: 1 }, value: counter, min: 0, max: 20, readonly: true }), _jsx(GaugeSlider, { width: 50, align: "center", gap: { bottom: 1 }, value: counter, min: 0, max: 20, readonly: true }), _jsx(DotSlider, { width: 50, align: "center", gap: { bottom: 1 }, value: counter, min: 0, max: 20, readonly: true })] }), _jsxs(Row, { width: "fill", align: "center", gap: { bottom: 2 }, children: [_jsx(Button, { height: 6, hotkey: "a", onClick: () => {
if (counter.value > 0)
counter.value--;
}, children: "Decrement" }), _jsx(Button, { height: 6, hotkey: "s", onClick: () => {
if (counter.value < 20)
counter.value++;
}, children: "Increment" })] })] }));
};