Terminal Component
TERMINUS
Componente terminal embebible. Vanilla HTML/CSS/JS — sin dependencias, sin frameworks. Copia dos líneas y funciona.
Casos de uso
Pruébalos en vivo
Cuatro ejemplos reales. Cada uno demuestra una capa distinta de la API — desde atributos HTML hasta TUI con teclado.
Elliot Alderson
data-commands
setPrompt()
readline()
onTab
amber
Instalar Terminus
play()
clear
matrix
windows
MU/TH/UR 6000
readline()
ocean
htop · linux-7.0-rc1
enterMode()
onClick
rows
dark
Herramienta
Configurador Interactivo
Define tema, prompt, mensaje de bienvenida y comandos. Genera el snippet listo para pegar.
Preview
en vivo
Configuración
Documentación
Referencia API
Atributos HTML y métodos JavaScript disponibles en v2.0.0.
Atributos HTML
| Atributo | Tipo | Default | Descripción |
|---|---|---|---|
data-theme |
String | "dark" |
dark · matrix · ocean · amber |
data-prompt |
String | "user@host:~$" |
Texto del prompt |
data-welcome |
String | null |
Mensaje inicial al cargar |
data-commands |
JSON | {} |
Comandos como strings. Para lógica usa la API JS. |
data-autofocus |
Flag | ausente |
Enfoca el input al cargar. Sin el atributo, no hace scroll ni focus. |
data-titlebar |
String | "mac" |
mac · linux · windows · none · custom |
El componente requiere height fijo en el elemento (no min-height) para que el scroll sea interno. Sin él, el terminal crece y la página scrollea en lugar del contenido. Ejemplo: style="height:400px;"
API JavaScript
| Método | Descripción |
|---|---|
t.setPrompt(str) | Cambia el prompt en tiempo real |
t.setCommands({cmd: fn|str}) | Añade o sobreescribe comandos |
t.addOutputHTML(html) | Imprime HTML en la terminal |
t.clear() | Limpia el output |
t.play(steps) | Secuencia animada. Tipos: cmd · output · outputHTML · progress · clear · pause. El tipo progress acepta text, steps, stepDelay. |
t.readline(prompt) | Espera input del usuario (Promise) |
t.enterMode(handler) | Activa modo TUI (oculta input, captura teclado). handler: { onKey(key, e, term), onClick(x, y, row, col, term), onCtrlC(term) } |
t.exitMode() | Sale del modo TUI y restaura el input |
t.addToOutput(text) | Imprime texto plano (seguro). Ver addOutputHTML para HTML. |
t.rows · t.cols | Filas y columnas visibles del viewport (read-only) |
t.options.onTab | Función (val, term) para autocomplete contextual. Por defecto completa comandos de una sola palabra. |
Acceso a la instancia
// Vía element.terminalComponent
const t = document.getElementById('mi-terminal').terminalComponent;
// Vía array global
const t = window.terminalInstances[0];
// Comandos como funciones (lógica avanzada)
t.setCommands({
'ping': (args, term) => {
const host = args[0] || 'localhost';
term.addOutputHTML(`<span style="color:#00ff88">Reply from ${host}: time=1ms</span>`);
}
});