Skip to content

Flexbox layout #1

@Nitemaeric

Description

@Nitemaeric

One major functionality required for creating complex UIs with ease is layout. There are 2 components within Conjuration that promote the ease of building UI layouts:

  • The Hash#left, Hash#right, Hash#top, Hash#bottom, and Hash#center methods.
  • The Conjuration::UI.build method.

One of the core design decisions introduced with the UI library is that nodes follow the top-left origin for layout by default, which may seem counterintuitive to the bottom-left origin of DragonRuby.

Conjuration::UI Features

Direction ✅

  • direction: :column (default)
  • direction: :row

Justify

  • justify: :start (default)
  • justify: :center
  • justify: :end
  • justify: :between
  • justify: :around
  • justify: :evenly

Align ✅

  • align: :start (default)
  • align: :center
  • align: :end
  • align: :stretch

Spacing

  • padding: Integer padding for all sides
  • padding: [x, y] padding for the x and y axes.
  • padding: { left:, right:, top:, bottom: } padding for each individual side.
  • gap: Integer spacing between child nodes.

Interactive nodes

  • Return all interactive nodes
  • Return interactive nodes within some bounds
  • Controller / Keyboard navigation for interactive nodes

UI globals

  • Set default cursor for hovering over interactive nodes.

Debugging

  • Ability to view "invisible" container bounds.
  • Ability to highlight all interactive nodes without user code.

Features under consideration

  • Automatically expanding container dimensions based on child nodes.
    • Good for dynamically sizing text containers.
    • Good for dynamically sizing containers with varying number of child nodes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions