Packages
moon
2.80.1
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/drag_handle.ex
defmodule Moon.Design.BottomSheet.DragHandle do
@moduledoc false
use Moon.StatelessComponent, slot: "drag_handle"
@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 """
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}
class={merge([
"flex items-center justify-center",
"absolute left-1/2 transform -translate-x-1/2",
"w-10 h-1 rounded bg-beerus",
"moon-drag-handle",
["#{@as_modal_on}:hidden": !!@as_modal_on],
@class
])}
data-testid={@testid}
/>
"""
end
end