Overview of the Phoenix and LiveView Overlay Component

The Mishka Chelekom overlay component is a Phoenix LiveView component that allows developers to create dynamic and customizable overlays, perfect for adding interactive layers or background effects to applications. It offers flexibility in layout, allowing for easy adjustment of color, opacity, and blur effects, ensuring a polished and visually engaging look.

This Phoenix LiveView component also supports layering HTML content, adding loading indicators, or other interactive elements within the overlay. With its responsive design and ease of use, this overlay component enhances visual appeal and user experience in a variety of applications.

Color prop in Phoenix LiveView overlay component

The color attribute in the Mishka Chelekom Overlay component allows developers to customize the background color of the overlay using predefined themes. The available colors include options like white , primary , secondary , dark , success , warning , danger , info , light , misc , and dawn . Each of these colors applies a unique shade, such as primary offering a dark blue, success providing a green tone, or danger showcasing a bold red. These options ensure that the overlay complements a wide range of designs while maintaining a consistent and visually appealing interface.

<.overlay color="white" />
<.overlay color="primary" />
<.overlay color="secondary" />
<.overlay color="dark" />
<.overlay color="success" />
<.overlay color="warning" />
<.overlay color="danger" />
<.overlay color="info" />
<.overlay color="light" />
<.overlay color="misc" />
<.overlay color="dawn" />

Opacity prop

The opacity attribute in the Mishka Chelekom Overlay component allows developers to control the transparency of the overlay. It provides several predefined levels of opacity, such as transparent for a light effect with 10% opacity, semi_transparent for 30% opacity, and opaque for a more solid 70% coverage. Options like heavily_tinted at 80% and almost_solid at 90% give designers control over how much of the background content remains visible, making it easy to adjust the visual balance of overlays based on specific needs.

<.overlay opacity="transparent" />
<.overlay opacity="translucent" />
<.overlay opacity="semi_transparent" />
<.overlay opacity="lightly_tinted" />
<.overlay opacity="tinted" />
<.overlay opacity="semi_opaque" />
<.overlay opacity="opaque" />
<.overlay opacity="heavily_tinted" />
<.overlay opacity="almost_solid" />

Blur prop in Phoenix LiveView overlay component

The blur prop in the Mishka Chelekom Overlay component adds a blur effect to the background, creating a soft-focus layer behind the main content. It provides options such as extra_small , small , medium , large , and extra_large , allowing developers to control the intensity of the blur effect. This can help highlight key content while subtly blurring the background, enhancing visual hierarchy within the application.

<.overlay blur="extra_small" />
<.overlay blur="small" />
<.overlay blur="medium" />
<.overlay blur="large" />
<.overlay blur="extra_large" />

How display content whithin ovelays

Place any content, including HTML elements or other components, inside the overlay component, allowing for flexible and dynamic layering. This makes it easy to add modals, loading indicators, or other interactive elements on top of existing content, while maintaining full control over the layout and appearance.

<.overlay color="misc" blur="small">
  <div class="flex justify-center items-center gap-4 h-full">
    <.spinner color="white" size="large" />
    <div class="text-white">Use components and any HTML in overlay</div>
  </div>
</.overlay>