LineaUI.Components.Mask (linea_ui v0.1.1)

Copy Markdown View Source

Crops its content to one of LineOne's mask shapes: squircle, reuleaux triangle, diamond, hexagon, octagon, star or heart.

<.mask shape="heart" src="/images/avatar.jpg" alt="Jane" class="size-36" />
<.mask shape="hexagon" class="size-20 bg-primary">
  <span>JD</span>
</.mask>

With src it renders the masked image itself; otherwise a block holding the inner content.

Summary

Functions

mask(assigns)

Renders a masked image (with src) or a masked block around the inner content. Size it with class.

mask_class(shape)

The classes of a mask shape, for elements that wear the mask themselves.

mask_shapes()

The shape names mask/1 takes.

Functions

mask(assigns)

Renders a masked image (with src) or a masked block around the inner content. Size it with class.

<.mask shape="hexagon" src={@user.photo} alt={@user.name} class="size-20" />

Attributes

  • shape (:string) - Defaults to "squircle". Must be one of "squircle", "reuleaux-triangle", "diamond", "hexagon", "hexagon-2", "octagon", "star", "star-2", or "heart".
  • src (:string) - Defaults to nil.
  • alt (:string) - Defaults to "".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

mask_class(shape)

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

The classes of a mask shape, for elements that wear the mask themselves.

mask_shapes()

@spec mask_shapes() :: [String.t()]

The shape names mask/1 takes.