LiveStyle.Attrs (LiveStyle v0.12.0)

A struct representing HTML attributes for styled elements.

This struct implements Phoenix.HTML.Safe and can be spread directly into HEEx templates:

~H"""<button {css([:base, :primary])}>Click me</button>"""

Fields

:class - Space-separated class names (string)
:style - Inline styles for dynamic values (string or nil)
:prop_classes - Property-to-class mappings for merging (internal use)

Summary

Functions

class_string(attrs)

Extracts just the class string from an Attrs struct.

to_list(attrs)

Converts the Attrs struct to a keyword list suitable for spreading into HTML elements.

Types

prop_classes()

@type prop_classes() :: [{atom() | String.t(), String.t() | :__unset__}]

t()

@type t() :: %LiveStyle.Attrs{
  class: String.t() | nil,
  prop_classes: prop_classes() | nil,
  style: String.t() | nil
}

Functions

class_string(attrs)

@spec class_string(t()) :: String.t()

Extracts just the class string from an Attrs struct.

to_list(attrs)

@spec to_list(t()) :: keyword()

Converts the Attrs struct to a keyword list suitable for spreading into HTML elements.

When spreading onto a component, the full Attrs struct is passed as the class value so that property classes can be merged. When rendering to HTML, Phoenix.HTML.Safe converts the struct to just the class string.

Examples

iex> LiveStyle.Attrs.to_list(%LiveStyle.Attrs{class: "btn", style: nil})
[class: %LiveStyle.Attrs{class: "btn", style: nil, prop_classes: nil}]

iex> LiveStyle.Attrs.to_list(%LiveStyle.Attrs{class: "btn", style: "--x: 1"})
[class: %LiveStyle.Attrs{class: "btn", style: "--x: 1", prop_classes: nil}, style: "--x: 1"]