Packages
moon
2.69.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/components/slide_over.ex
defmodule Moon.Components.SlideOver do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Assets.Icons.IconCloseRounded
alias Moon.Components.Heading
prop(on_close, :event, required: true)
slot(heading)
slot(options)
slot(content, required: true)
def render(assigns) do
~F"""
{!-- Overlay --}
<div :on-click={@on_close} class="fixed inset-0 z-20" />
<div class="w-screen max-w-2xl fixed top-0 right-0 bottom-0 w-1/2 p-6 z-20 bg-goku shadow overflow-y-auto">
{!-- SlideOver Header --}
<div class="flex items-center justify-between mb-6">
<Heading size="20">
<#slot {@heading} />
</Heading>
<div class="flex items-center">
<#slot {@options} />
<div class="p-2 rounded bg-gohan cursor-pointer" :on-click={@on_close}>
<IconCloseRounded font_size="1.5rem" />
</div>
</div>
</div>
{!-- SlideOver Content --}
<#slot {@content} />
</div>
"""
end
end