Packages
moon
2.79.13
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/components/loader_page.ex
defmodule MoonWeb.Pages.Components.LoaderPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Loader
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/loader",
name: "Loader"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"hit",
:description => ~c"Colour of Loader"
},
%{
:name => ~c"size",
:type => ~c"2xs | xs | sm | md | lg",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size of Loader"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Loader">
<DeprecationWarning
name="Loader"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.LoaderPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="loader_1">
<:example>
<Loader />
</:example>
<:code>{loader_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Colors" id="loader_2">
<:example>
<Loader />
<Loader color="trunks" />
<Loader color="krillin" />
</:example>
<:code>{loader_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Sizes" id="loader_3">
<:example>
<Loader size="twoxsmall" />
<Loader size="xsmall" />
<Loader size="small" />
<Loader />
<Loader size="large" />
</:example>
<:code>{loader_3_code()}</:code>
</ExampleAndCode>
<PropsTable title="Loader props" data={@props_info_array} />
</Page>
"""
end
def loader_1_code do
"""
<Loader/>
"""
end
def loader_2_code do
"""
<Loader color="hit"/>
<Loader color="trunks"/>
<Loader color="krillin"/>
"""
end
def loader_3_code do
"""
<Loader size="twoxsmall"/>
<Loader size="xsmall"/>
<Loader size="small"/>
<Loader />
<Loader size="large"/>
"""
end
end