Packages
moon
2.84.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_web/examples/design/dropdown_example/option_layouts.ex
defmodule MoonWeb.Examples.Design.DropdownExample.OptionLayouts do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Dropdown
alias Moon.Components.Chip
alias Moon.Components.Lego
alias Moon.Icons.{
OtherWater,
OtherLightning,
OtherMoon,
OtherSun
}
data(values, :list, default: ["1", "4"])
data(is_open, :boolean, default: false)
# please note - only for checkbox list "countries", bc it have different behaviour
def handle_event("on_change", %{"value" => value}, socket) do
{:noreply,
assign(socket,
is_open: true,
values:
(Enum.member?(socket.assigns.values, value) &&
Enum.filter(socket.assigns.values, &(&1 != value))) || [value | socket.assigns.values]
)}
end
def render(assigns) do
~F"""
<div class="w-full flex flex-wrap gap-2 justify-around">
<Dropdown id="dropdown-options-01">
<Dropdown.Trigger>
<Chip>sort by</Chip>
</Dropdown.Trigger>
<Dropdown.Options class="w-auto">
<Dropdown.Option>
<Lego.Title><OtherLightning class="text-[1.5rem]" />Option 1</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherWater class="text-[1.5rem]" />Option 2</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherSun class="text-[1.5rem]" />Option 3</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherMoon class="text-[1.5rem]" />Option 4</Lego.Title>
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
<Dropdown id="dropdown-options-02" class="w-52">
<Dropdown.Trigger>
<Chip class="w-52">Select language</Chip>
</Dropdown.Trigger>
<Dropdown.Options>
<Dropdown.Option>
<Lego.Title>Mandarin Chinese</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>English</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Spanish</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Hindi</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Bengali</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Portuguese</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
<Dropdown id="dropdown-options-03" {=@is_open} value={@values}>
<Dropdown.Trigger>
<Chip>Select countries</Chip>
</Dropdown.Trigger>
<Dropdown.Options on_change="on_change">
<Dropdown.Option>
<Lego.Title>Australia</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Canada</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>China</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Germany</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Hungary</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Japan</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
</div>
"""
end
def code() do
"""
data(values, :list, default: ["1", "4"])
data(is_open, :boolean, default: false)
# please note - only for checkbox list "countries", bc it have a bit different behaviour
def handle_event("on_change", %{"value" => value}, socket) do
{:noreply,
assign(socket,
is_open: true,
values:
(Enum.member?(socket.assigns.values, value) &&
Enum.filter(socket.assigns.values, &(&1 != value))) || [value | socket.assigns.values]
)}
end
...
<div class="w-full flex flex-wrap gap-2 justify-around">
<Dropdown id="dropdown-options-01">
<Dropdown.Trigger>
<Chip>sort by</Chip>
</Dropdown.Trigger>
<Dropdown.Options class="w-auto">
<Dropdown.Option>
<Lego.Title><OtherLightning class="text-[1.5rem]" />Option 1</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherWater class="text-[1.5rem]" />Option 2</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherSun class="text-[1.5rem]" />Option 3</Lego.Title>
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title><OtherMoon class="text-[1.5rem]" />Option 4</Lego.Title>
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
<Dropdown id="dropdown-options-02" class="w-52">
<Dropdown.Trigger class="w-52">
<Chip>Select language</Chip>
</Dropdown.Trigger>
<Dropdown.Options>
<Dropdown.Option>
<Lego.Title>Mandarin Chinese</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>English</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Spanish</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Hindi</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Bengali</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Portuguese</Lego.Title>
<Lego.Radio />
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
<Dropdown id="dropdown-options-03" {=@is_open} value={@values}>
<Dropdown.Trigger>
<Chip>Select countries</Chip>
</Dropdown.Trigger>
<Dropdown.Options>
<Dropdown.Option>
<Lego.Title>Australia</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Canada</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>China</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Germany</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Hungary</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
<Dropdown.Option>
<Lego.Title>Japan</Lego.Title>
<Lego.Checkbox />
</Dropdown.Option>
</Dropdown.Options>
</Dropdown>
</div>
"""
end
end