Packages
moon
2.87.2
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/pages/phoenix_usage_page.ex
defmodule MoonWeb.Pages.PhoenixUsagePage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.CodeSnippet
alias MoonWeb.Components.Page
alias MoonWeb.Components.PageSection
data(breadcrumbs, :any,
default: [
%{
to: "/usage_with_phoenix_templates",
name: "Usage with Phoenix templates"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<h1 class="text-moon-32 font-semibold">Usage with Phoenix templates</h1>
<PageSection>
<p>
If you find a Moon component you want to use in your existing non-surface templates the recommended way
is to replace the live views (or components) that will use the desired component with their Surface's counterparts. See
<a
class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"
href="https://surface-ui.org/usage_with_phoenix_templates"
rel="nofollow"
target="_blank"
>
Surface guides
</a>
</p>
<p>
Another solution is to use Moon helpers for rendering components in PhoenixLiveView templates, i.e. using ~H or in *.heex files, is partially
supported, however, this approach is limited and mostly not recommended. Keep in mind that Surface extends Liveview, adding extra features
like slots and contexts, that are partially supported by helpers.
</p>
</PageSection>
<PageSection title="Examples">
<p>Imagine you want to insert Button component to a template. Using Surface your code will look like</p>
<CodeSnippet>{surface_code()}</CodeSnippet>
<p>The same with LiveView only</p>
<CodeSnippet>{liveview_code()}</CodeSnippet>
<p>
Please note that surface_component function can render only stateless component. For stateful one you should use
surface_live_component function. And moon function can be used for both types of components.
</p>
</PageSection>
<PageSection title="Context">
<p>
Context usage is a bit tricky. You have to pass it as a Map to the __context__ attribute. And it will not be populated to the
child components within template. See examples
</p>
<CodeSnippet>{surface_context_code()}</CodeSnippet>
<CodeSnippet>{liveview_context_code()}</CodeSnippet>
</PageSection>
</Page>
"""
end
def surface_code() do
"""
alias Moon.Components.Button
def render(assigns) do
~F\"""
...
<Button variant="secondary">Secondary</Button>
...
\"""
end
"""
end
def liveview_code() do
"""
alias Moon.Components.Button
import Moon.Helpers.MoonRender
def render(assigns) do
~H\"""
...
<.moon module={Button} variant="secondary">Secondary</.moon>
# or, if you wish more explicit naming - use for stateless component
<.surface_component module={Button} variant="secondary">Secondary</.surface_component>
...
\"""
end
"""
end
def surface_context_code() do
"""
# with Surface
def render(assigns) do
~F\"""
...
<Context put={locale: @locale}>
<Button variant="secondary">Secondary</Button>
</Context>
...
\"""
end
"""
end
def liveview_context_code() do
"""
# without Surface
def render(assigns) do
~H\"""
...
<.moon module={Button}
variant="secondary"
__context__={%{locale: @locale}}
>
Secondary
</.moon>
...
\"""
end
"""
end
end