Packages
moon
2.76.0
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/design/bottom_sheet/panel.ex
defmodule Moon.Design.BottomSheet.Panel do
@moduledoc false
use Moon.StatelessComponent, slot: "panel"
@doc "Tailwind classes for customization"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Header of BottomSheet, see BottomSheet.Header"
slot(header)
@doc "Content of BottomSheet"
slot(default)
# inner API
@doc "Will be got from Bottomsheet in most cases"
prop(on_close, :event, from_context: :on_close)
@doc """
Deprecated: Will be got from Bottomsheet in most cases
"""
prop(has_shadow, :boolean, from_context: :has_shadow)
@doc """
Deprecated: Will be got from Bottomsheet in most cases
"""
prop(size, :string, from_context: :size)
@doc """
Experimental: makes BottomSheet behave as Modal on some screen widths,
please reffer to https://tailwindcss.com/docs/screens
In most cases got from context
"""
prop(as_modal_on, :string, values: ~w(sm md lg xl 2xl), from_context: :as_modal_on)
def render(assigns) do
~F"""
<div
{=@id}
data-animate_enter_class="animate-drawer_enter_bottom"
data-animate_leave_class="animate-drawer_leave_bottom"
class={merge([
[
"absolute flex flex-col inset-x-0 bottom-0 rounded-t-moon-i-md bg-goku p-2 h-1/3 overflow-auto",
"moon-panel",
"pt-0": slot_assigned?(:header),
"shadow-moon-lg": @has_shadow,
"h-1/3": @size == "sm",
"h-[64%]": @size == "md",
"h-[88%]": @size == "lg"
],
modal_classes(@as_modal_on),
@class
])}
:on-click-away={@on_close}
data-testid={@testid}
>
<#slot {@header} />
<#slot />
</div>
"""
end
defp modal_classes(nil), do: []
defp modal_classes(size) do
~w(max-w-sm inline-block rounded-xl align-middle shadow-moon-lg bottom-auto inset-x-auto)
|> Enum.map(&"#{size}:#{&1}")
end
end