PhiaUi.Components.Layout.Spacer (phia_ui v0.1.17)

Flex spacer that grows to fill remaining space in a flex container.

Drop a <.spacer /> between two items in a flex row/column to push the trailing item to the far end — equivalent to margin-left: auto patterns.

Examples

<%!-- Push actions to the right in a toolbar --%>
<div class="flex items-center">
  <span>Title</span>
  <.spacer />
  <.button>Action</.button>
</div>

<%!-- Fixed-size gap --%>
<div class="flex flex-col">
  <p>Top</p>
  <.spacer size={:md} />
  <p>Below with fixed gap</p>
</div>

Summary

Functions

spacer(assigns)

Renders a flex spacer element.

Functions

spacer(assigns)

Renders a flex spacer element.

Attributes

size (:atom) - auto grows to fill remaining flex space; others add a fixed dimension. Defaults to :auto. Must be one of :auto, :xs, :sm, :md, :lg, or :xl.
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.