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

Copy Markdown View Source

Responsive visibility components for declaratively showing or hiding content at specific breakpoints.

These components eliminate ad-hoc hidden md:block class strings by encoding the intent as a component with a typed :at or :from/:to attribute.

Components

  • show_on/1 — shows content at or above a breakpoint
  • hide_on/1 — hides content at or above a breakpoint
  • show_between/1 — shows content between two breakpoints

Examples

<%!-- Desktop-only sidebar --%>
<.show_on at={:lg}>
  <aside>Sidebar content</aside>
</.show_on>

<%!-- Hide verbose text on small screens --%>
<.hide_on at={:md}>
  <p>This paragraph is only visible on mobile.</p>
</.hide_on>

<%!-- Tablet-only content --%>
<.show_between from={:md} to={:xl}>
  <p>Visible on tablets only.</p>
</.show_between>

Summary

Functions

hide_on(assigns)

Hides content at or above the specified breakpoint.

show_between(assigns)

Shows content between two breakpoints (visible from :from, hidden at :to).

show_on(assigns)

Shows content only at or above the specified breakpoint.

Functions

hide_on(assigns)

Hides content at or above the specified breakpoint.

Attributes

  • at (:atom) - Breakpoint at or above which the content becomes hidden. Defaults to :md. Must be one of :sm, :md, :lg, :xl, or :"2xl".
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block (required) - Content to hide at the specified breakpoint.

show_between(assigns)

Shows content between two breakpoints (visible from :from, hidden at :to).

Attributes

  • from (:atom) - Lower breakpoint (content becomes visible here). Defaults to :sm. Must be one of :sm, :md, :lg, :xl, or :"2xl".
  • to (:atom) - Upper breakpoint (content becomes hidden here). Defaults to :lg. Must be one of :sm, :md, :lg, :xl, or :"2xl".
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block (required) - Content visible between the two breakpoints.

show_on(assigns)

Shows content only at or above the specified breakpoint.

Attributes

  • at (:atom) - Breakpoint at or above which the content becomes visible. Defaults to :md. Must be one of :sm, :md, :lg, :xl, or :"2xl".
  • as (:atom) - HTML element to render — :div uses block, :span uses inline. Defaults to :div. Must be one of :div, or :span.
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block (required) - Content to show at the specified breakpoint.