Packages
moon
2.77.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/modal_example/with_styled_content.ex
defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithStyledContent do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Icons.ControlsClose
alias Moon.Design.Modal
alias Moon.Design.Button
def render(assigns) do
~F"""
<div>
<Button on_click="set_open">Open dialog</Button>
<Modal id="styled_modal">
<Modal.Backdrop />
<Modal.Panel class="lg:max-w-md bg-roshi text-goten rounded-none">
<span class="absolute top-5 right-5 cursor-pointer">
<ControlsClose class="text-moon-24" click="set_close" />
</span>
<div class="p-4 pt-11">
<div class="mt-2">
<h3 class="text-moon-24 text-goten font-medium text-center">
Your payment has been successfully submitted.
</h3>
</div>
</div>
<div class="p-4 flex items-center justify-center">
<Button variant="outline" on_click="set_close">Got it, thanks!</Button>
</div>
</Modal.Panel>
</Modal>
</div>
"""
end
def handle_event("set_open", _, socket) do
Modal.open("styled_modal")
{:noreply, socket}
end
def handle_event("set_close", _, socket) do
Modal.close("styled_modal")
{:noreply, socket}
end
def code() do
"""
alias Moon.Icons.ControlsClose
alias Moon.Design.Modal
alias Moon.Design.Button
def render(assigns) do
~F\"""
<div>
<Button on_click="set_open">Open dialog</Button>
<Modal id="styled_modal">
<Modal.Backdrop />
<Modal.Panel class="lg:max-w-md bg-roshi text-goten rounded-none">
<span class="absolute top-5 right-5 cursor-pointer">
<ControlsClose class="text-moon-24" click="set_close" />
</span>
<div class="p-4 pt-11">
<div class="mt-2">
<h3 class="text-moon-24 text-goten font-medium text-center">
Your payment has been successfully submitted.
</h3>
</div>
</div>
<div class="p-4 flex items-center justify-center">
<Button variant="outline" on_click="set_close">Got it, thanks!</Button>
</div>
</Modal.Panel>
</Modal>
</div>
\"""
end
def handle_event("set_open", _, socket) do
Modal.open("styled_modal")
{:noreply, socket}
end
def handle_event("set_close", _, socket) do
Modal.close("styled_modal")
{:noreply, socket}
end
"""
end
end