Box (Block) Widget Example
Demonstrates visual container attributes with interactive cycling.
Widgets often float in a void. Without boundaries, interfaces become a chaotic mess of text. Block (often called a Box) provides the structure and visual hierarchy needed to organize information.
Features Demonstrated
-
Border Types: Native styles like
:plain,:rounded,:double,:thick. -
Custom Borders: defining completely custom character sets (e.g. using numbers or letters for borders).
-
Styling: Independent control over border color, background style, and title style.
-
Positioning: Placing titles on the
:topor:bottomborder (position). -
Alignment: Aligning titles to
:left,:center, or:right(alignment).
Hotkeys
-
Arrow Keys: Change Border/Content Color
-
Space: Cycle Border Type (
border_type) -
c: Cycle Custom Border Set (
border_set) -
Enter: Cycle Title Alignment (
title_alignment) -
s: Cycle Content Style (
style) -
t: Cycle Title Style (
title_style) -
b: Cycle Border Style (
border_style) -
q: Quit
Usage
ruby examples/widget_box_demo/app.rb
Learning Outcomes
Use this example if you need to… - Group related widgets together. - Create distinct “panels” or “cards” in your UI. - Style borders to indicate state (e.g., Red border for error state). - Understand the difference between style (content) and border_style (frame).
