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/tutorials/theming/theming_and_visuals.ex
defmodule MoonWeb.Pages.Theming.ThemingAndVisuals do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Heading
alias Moon.Components.Link
alias Moon.Components.Text
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Tutorials"
},
%{
to: "/tutorials/theming-and-visuals",
name: "Theming and Visuals"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={32}>Theming and visuals</Heading>
<Text>
Theming and visuals is based on TailwindCSS rules.
</Text>
<Heading size={24} class="mt-8" id="text-color">Text color</Heading>
Read more: <Link to="https://tailwindcss.com/docs/text-color">https://tailwindcss.com/docs/text-color</Link>
<Heading size={24} class="mt-8" id="background-color">Background color</Heading>
Read more: <Link to="https://tailwindcss.com/docs/background-color">https://tailwindcss.com/docs/background-color</Link>
<Heading size={24} class="mt-8" id="border-radius">Border radius</Heading>
Read more: <Link to="https://tailwindcss.com/docs/border-radius">https://tailwindcss.com/docs/border-radius</Link>
<Heading size={24} class="mt-8" id="margin">Margin</Heading>
Read more: <Link to="https://tailwindcss.com/docs/margin">https://tailwindcss.com/docs/margin</Link>
<Heading size={24} class="mt-8" id="padding">Padding</Heading>
Read more: <Link to="https://tailwindcss.com/docs/padding">https://tailwindcss.com/docs/padding</Link>
<Heading size={24} class="mt-8" id="responsive-layout">Responsive layout</Heading>
Read more: <Link to="https://tailwindcss.com/docs/responsive-design">https://tailwindcss.com/docs/responsive-design</Link>
</TopToDown>
</Page>
"""
end
end