Skip to content

Latest commit

 

History

History
57 lines (37 loc) · 1.63 KB

File metadata and controls

57 lines (37 loc) · 1.63 KB

Horizontal Layout Module

Container module for arranging child modules horizontally in a row.

Features

  • Horizontal arrangement - Place modules side by side
  • Flexible alignment - Control how modules are positioned
  • Gap controls - Spacing between modules
  • Wrapping support - Allow modules to wrap to next line
  • Nested layouts - Combine with vertical layouts for complex designs

Configuration

Layout Configuration

  • Horizontal Alignment - Left, center, right, space-between, space-around
  • Vertical Alignment - Top, center, bottom, stretch, baseline
  • Allow Wrapping - Modules wrap to next line when container width exceeded

Gap Configuration

  • Gap Between Items - Spacing between modules (in rem units)
  • Negative Values - Use negative values to overlap modules

Alignment Options

Horizontal Alignment

  • Left - Modules aligned to left side
  • Center - Modules centered in container
  • Right - Modules aligned to right side
  • Space Between - Equal space between modules
  • Space Around - Equal space around each module
  • Justify - Modules stretch to fill width

Vertical Alignment

  • Top - Modules aligned to top
  • Center - Modules centered vertically
  • Bottom - Modules aligned to bottom
  • Stretch - Modules stretch to fill height
  • Baseline - Modules aligned to text baseline

Examples

Icon Row

Horizontal layout with multiple icon modules for device controls.

Info Bar

Horizontal layout with info modules showing temperature, humidity, and pressure.

Button Group

Horizontal layout with button modules for scene controls.