Skip to main content

​
Overview

Toggle visibility of content panels.

​
Import

import { Collapsible } from 'nikcli-tui';

​
Usage

new Collapsible({ parent: screen, title: 'Details', content: 'Hidden content' });

​
Live Preview

​
Run Locally

npm run tsx:core-gallery

​
Props

  • title: string — Header label.
  • content?: string — Body content.
  • defaultOpen?: boolean — Initial expanded state (default true).
  • BaseProps: borderStyle defaults to line, label set from title.

​
Methods

  • toggle(), setContent(text), setTitle(text), setOpen(bool), isOpen().

​
Keyboard

  • Space/Enter: toggle open/closed when focused.

​
Installation

npm i nikcli-tui

​
Import

import { Collapsible } from 'nikcli-tui';

​
Quick Start

new Collapsible({ parent: screen, title: 'Details', content: 'Hidden content', defaultOpen: false });

​
Production Examples

const cs = new Collapsible({ parent: screen, top: 1, left: 2, width: 50, title: 'Server', defaultOpen: true, content: 'uptime: 123d' });
const nested = new Collapsible({ parent: cs.el, top: 2, left: 2, width: 44, title: 'Logs', defaultOpen: false, content: '...' });

​
Testing

const c = new Collapsible({ parent: screen, title: 'X', defaultOpen: true });
expect(c.isOpen()).toBe(true);
c.toggle();

​
Best Practices

  • Mantieni i titoli brevi e informativi; usa Paragraph all’interno per testo lungo.