Packages
moon
2.79.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_web/examples/design/form/radio_example/customizations.ex
defmodule MoonWeb.Examples.Design.Form.RadioExample.Customizations do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Form.Radio
alias Moon.Design.Form.Radio.{Button, Indicator}
data(value1, :string, default: "first")
data(value2, :string, default: "second")
data(value3, :string, default: "")
def handle_event("changed" <> ind, %{"value" => value}, socket) do
{:noreply, assign(socket, "value#{ind}": value)}
end
def render(assigns) do
~F"""
<div class="w-full flex flex-wrap items-center justify-around gap-4">
<Radio value={@value1} on_change="changed1" class="flex gap-4">
<Button value="first">
<Indicator /> Option 1
</Button>
<Button value="second">
<Indicator /> Option 2
</Button>
</Radio>
<Radio value={@value2} on_change="changed2">
<Button
value="first"
class="w-48 p-2 justify-between hover:bg-goku transition-colors rounded-moon-i-sm"
>
Button 1 <Indicator />
</Button>
<Button
value="second"
class="w-48 p-2 justify-between hover:bg-goku transition-colors rounded-moon-i-sm"
>
Button 2 <Indicator />
</Button>
</Radio>
<Radio value={@value3} on_change="changed3">
<Button value="first">
<Indicator class="border-chichi" /> Button 1
</Button>
<Button value="second">
<Indicator class="moon-checked:border-nappa after:bg-nappa" /> Button 2
</Button>
</Radio>
</div>
"""
end
def code() do
"""
alias Moon.Design.Form.Radio
alias Moon.Design.Form.Radio.{Button, Indicator}
data(value1, :string, default: "first")
data(value2, :string, default: "second")
data(value3, :string, default: "")
def handle_event("changed" <> ind, %{"value" => value}, socket) do
{:noreply, assign(socket, "value\#{ind}": value)}
end
def render(assigns) do
~F\"""
<div class="w-full flex flex-wrap items-center justify-around gap-4">
<Radio value={@value1} on_change="changed1" class="flex gap-4">
<Button value="first">
<Indicator /> Button 1
</Button>
<Button value="second">
<Indicator /> Button 2
</Button>
</Radio>
<Radio value={@value2} on_change="changed2">
<Button value="first" class="w-48 p-2 justify-between hover:bg-goku transition-colors rounded-moon-i-sm">
Button 1 <Indicator />
</Button>
<Button value="second" class="w-48 p-2 justify-between hover:bg-goku transition-colors rounded-moon-i-sm">
Button 2 <Indicator />
</Button>
</Radio>
<Radio value={@value3} on_change="changed3">
<Button value="first">
<Indicator class="border-chichi" /> Button 1
</Button>
<Button value="second">
<Indicator class="moon-checked:border-nappa after:bg-nappa" /> Button 2
</Button>
</Radio>
</div>
\"""
end
"""
end
end