Packages
moon
2.73.4
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_web/examples/design/dropdown_example/responsive_dropdown.ex
defmodule MoonWeb.Examples.Design.DropdownExample.ResponsiveDropdown do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Dropdown
alias Moon.Components.Chip
def render(assigns) do
~F"""
<div>
<Dropdown id="responsive-dropdown" as_dropdown_on="md" on_close="set_close">
<Dropdown.BottomOptions titles={["Wade Cooper", "Arlene Mccoy", "Devon Webb", "Tom Cook", "Tanya Fox", "Hellen Schmidt"]} />
<Dropdown.Trigger :let={value: value}>
<Chip class="w-64">{value || "BottomSheet on small screen"}
</Chip>
</Dropdown.Trigger>
<Dropdown.Backdrop />
</Dropdown>
</div>
"""
end
def handle_event("set_close", _, socket) do
Dropdown.close("responsive-dropdown")
{:noreply, socket}
end
def code() do
"""
alias Moon.Design.Dropdown
alias Moon.Components.Chip
def render(assigns) do
~F\"""
<div>
<Dropdown id="responsive-dropdown" as_dropdown_on="md" on_close="set_close">
<Dropdown.BottomOptions titles={["Wade Cooper", "Arlene Mccoy", "Devon Webb", "Tom Cook", "Tanya Fox", "Hellen Schmidt"]} />
<Dropdown.Trigger :let={value: value}>
<Chip class="w-64">{value || "BottomSheet on small screen"}
</Chip>
</Dropdown.Trigger>
<Dropdown.Backdrop />
</Dropdown>
</div>
\"""
end
def handle_event("set_close", _, socket) do
Dropdown.close("responsive-dropdown")
{:noreply, socket}
end
"""
end
end