Athanor.Components.Columns (Athanor v0.1.0-beta.1)

Copy Markdown View Source

Multi-column layout container — library-native Athanor component.

Configurable via the editor's AutoEditorForm:

  • num_zones: 2..4 columns
  • vertical_align: top / center / bottom / stretch
  • width_distribution: per-num_zones option set (50/50, 66/33, ...)

Storage shape:

%{
  "num_zones"          => "2",
  "zone_names"         => ["one", "two"],
  "zones"              => %{"one" => [...nodes], "two" => [...nodes]},
  "vertical_align"     => "top",
  "width_distribution" => "equal"
}

Child nodes inside each zone are rendered via Athanor.Renderer.node_component/1 — so any registered Athanor or legacy component can live inside Columns.

Editor canvas chrome

When ctx.edit_mode? is true, render(:live) adds dashed-border zone borders and an "Add Component" button per zone. The button's phx-click is built from ctx.add_component_callback.(zone_name) — the consumer LiveView provides this callback (typically a Phoenix.LiveView.JS.push(...) command) so the consumer's palette modal is what opens; the library never assumes what components are available.