PhiaUiDesign.Canvas.Layout (phia_ui v0.1.17)

Converts node layout properties to Tailwind CSS v4 classes.

Layout properties on frame nodes (:layout, :gap, :padding, etc.) are translated to their Tailwind equivalents. Non-standard values use arbitrary value syntax (e.g., gap-[13px]).

Summary

Functions

has_layout?(node)

Check if a node has any layout properties set.

layout_fields()

List of layout field names

to_classes(node)

Convert a node's layout properties to a Tailwind class string.

Functions

has_layout?(node)

@spec has_layout?(map()) :: boolean()

Check if a node has any layout properties set.

layout_fields()

@spec layout_fields() :: [atom()]

List of layout field names

to_classes(node)

@spec to_classes(map()) :: String.t()

Convert a node's layout properties to a Tailwind class string.

Accepts a Node struct or a map with layout keys. Returns an empty string if no layout properties are set.

Examples

iex> Layout.to_classes(%{layout: :vertical, gap: 16})
"flex flex-col gap-4"

iex> Layout.to_classes(%{layout: :horizontal, padding: [8, 16, 8, 16]})
"flex flex-row pt-2 pr-4 pb-2 pl-4"

iex> Layout.to_classes(%{width: :fill, height: :hug})
"w-full h-fit"