Packages
mishka_chelekom
0.0.9-alpha.13
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/components/overlay.md
# Overlay Component
Layered overlay for modals, loading screens, and background dimming.
**Documentation**: https://mishka.tools/chelekom/docs/overlay
> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.
## Generate
```bash
mix mishka.ui.gen.component overlay
```
## Dependencies
| Type | Components |
|------|------------|
| **Necessary** | None |
| **Optional** | None |
| **JavaScript** | None |
## Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `color` | `:string` | `"base"` | Color theme |
| `opacity` | `:string` | `"semi_opaque"` | Opacity level |
| `backdrop` | `:string` | `nil` | Backdrop blur size |
| `class` | `:any` | `nil` | Custom CSS class |
## Slots
### `inner_block` Slot
Content to display over the overlay.
## Available Options
### Colors
`base`, `natural`, `white`, `dark`, `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `misc`, `dawn`, `silver`
### Opacity
`transparent`, `light`, `semi_opaque`, `opaque`, `solid`
### Backdrop
`extra_small`, `small`, `medium`, `large`, `extra_large`
## Usage Examples
### Basic Overlay
```heex
<.overlay color="dark" opacity="semi_opaque" />
```
### With Content
```heex
<.overlay color="dark" opacity="semi_opaque">
<div class="flex justify-center items-center h-full">
<.spinner size="large" />
</div>
</.overlay>
```
### With Backdrop Blur
```heex
<.overlay color="white" opacity="light" backdrop="medium" />
```
### Loading Screen
```heex
<.overlay :if={@loading} color="dark" opacity="semi_opaque">
<div class="flex flex-col items-center justify-center h-full text-white">
<.spinner size="large" color="white" />
<p class="mt-4">Loading...</p>
</div>
</.overlay>
```
## Common Patterns
### Modal Backdrop
```heex
<div class="relative">
<.overlay color="dark" opacity="semi_opaque" />
<div class="absolute inset-0 flex items-center justify-center">
<.modal id="my-modal" show={true}>
Modal content
</.modal>
</div>
</div>
```
### Image Overlay
```heex
<div class="relative">
<img src="/image.jpg" alt="Image" />
<.overlay color="primary" opacity="semi_opaque">
<div class="flex items-center justify-center h-full text-white">
<h2 class="text-2xl font-bold">Overlay Title</h2>
</div>
</.overlay>
</div>
```