Overlay

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 backdrop 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.

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 base, natural, white, dark, primary, secondary, success, warning, danger, info, silver, 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="base" />
<.overlay color="natural" />
<.overlay color="white" />
<.overlay color="dark" />
<.overlay color="primary" />
<.overlay color="secondary" />
<.overlay color="success" />
<.overlay color="warning" />
<.overlay color="danger" />
<.overlay color="info" />
<.overlay color="misc" />
<.overlay color="dawn" />
<.overlay color="silver" />

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" />

The backdrop prop in the Mishka Chelekom Overlay component adds a backdrop 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 backdrop effect. This can help highlight key content while subtly blurring the background, enhancing visual hierarchy within the application.

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

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" backdrop="small">
  <div class="flex justify-center items-center gap-4 h-full">
    <.spinner color="silver" size="large" />
    <div class="text-white">Use components and any HTML in overlay</div>
  </div>
</.overlay>

The z_index attribute in the Mishka Chelekom Overlay component controls the stacking order of the overlay relative to other elements. By default, it uses z-50 but can be customized with other utility classes like z-10 or any other z-index value to ensure proper layering in complex layouts.

<.overlay z_index="z-10" />
<.overlay z_index="z-20" />