EssenceUI.Utilities.Inset (Essence UI v0.2.0)

Copy Markdown View Source

A utility for applying negative margins to elements so they "bleed" into their container.

Inset utility for nested padding within containers. Commonly used within Card or Dialog components.

Examples

<.card>
  <.inset side="top" clip="border-box">
    <img src="..." />
  </.inset>
  <.text>Card content</.text>
</.card>

Props

  • side - "top", "bottom", "left", "right", "x", "y", "all" (default: "all")
  • clip - "border-box", "padding-box" (default: "border-box")
  • Plus margin props

Summary

Functions

inset(assigns)

Renders an inset utility container.

Functions

inset(assigns)

Renders an inset utility container.

Attributes

  • side (:string) - Defaults to "all". Must be one of "top", "bottom", "left", "right", "x", "y", or "all".
  • clip (:string) - Defaults to "border-box". Must be one of "border-box", or "padding-box".
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to nil.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • Global attributes are accepted.

Slots

  • inner_block (required)