Packages
moon
2.79.7
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/form/checkbox_example/customizations.ex
defmodule MoonWeb.Examples.Design.Form.CheckboxExample.Customizations do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Lego.Checkbox
prop(is_selected0, :boolean, default: false)
prop(is_selected1, :boolean, default: false)
prop(is_selected2, :boolean, default: false)
prop(is_selected3, :boolean, default: false)
def handle_event("on_click" <> index, _params, socket) do
{:noreply, assign(socket, "is_selected#{index}": !socket.assigns[:"is_selected#{index}"])}
end
def render(assigns) do
~F"""
<div class="w-full flex flex-wrap items-center justify-around">
<Checkbox class="moon-checked:bg-krillin" is_selected={@is_selected0} on_click="on_click0" />
<Checkbox class="rounded-none" is_selected={@is_selected1} on_click="on_click1" />
<Checkbox class="shadow-krillin" is_selected={@is_selected2} on_click="on_click2" />
<Checkbox
class="text-roshi moon-checked:bg-roshi-10"
is_selected={@is_selected3}
on_click="on_click3"
/>
</div>
"""
end
def code() do
"""
alias Moon.Lego.Checkbox
prop(is_selected0, :boolean, default: false)
prop(is_selected1, :boolean, default: false)
prop(is_selected2, :boolean, default: false)
prop(is_selected3, :boolean, default: false)
def handle_event("on_click" <> index, _params, socket) do
{:noreply, assign(socket, "is_selected#\{index}": !socket.assigns[:"is_selected#\{index}"])}
end
def render(assigns) do
~F\"""
<div class="w-full flex flex-wrap items-center justify-around">
<Checkbox class="moon-checked:bg-krillin" is_selected={@is_selected0} on_click="on_click0" />
<Checkbox class="rounded-none" is_selected={@is_selected1} on_click="on_click1" />
<Checkbox class="shadow-krillin" is_selected={@is_selected2} on_click="on_click2" />
<Checkbox class="text-roshi moon-checked:bg-roshi-10" is_selected={@is_selected3} on_click="on_click3" />
</div>
\"""
end
"""
end
end