Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/typography/heading_page.ex
# This component is deprecated, use /components/typography/ css classes
defmodule MoonWeb.Pages.Components.Typography.HeadingPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Heading
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/heading",
name: "Heading"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"text-bulma",
:description => ~c"Heading color"
},
%{
:name => ~c"size",
:type => ~c"16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72",
:required => ~c"No",
:default => ~c"16",
:description => ~c"Heading size"
},
%{
:name => ~c"is_regular",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Whether font weight is normal"
},
%{
:name => ~c"text_align",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Alignment"
},
%{
:name => ~c"is_uppercase",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Whether text is uppercase"
},
%{
:name => ~c"is_underline",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Whether text is underlined"
},
%{
:name => ~c"line_height",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Custom line height"
}
]
)
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}>
<ComponentPageDescription title="Heading">
<p class="font-medium">
NB! The component is depricated. Please use our
<a
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Components.TypographyPage,
theme_name: @theme_name,
direction: @direction
)}
class="text-piccolo transition-colors duration-200 hover:text-hit visited:text-hit"
>
new Typography
</a>
built with Tailwind.
</p>
<p>
We have predefined font sizes: 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72. Line heights are calculated automatically based on font size.
</p>
<p>By default font size is 16. You can choose any size.</p>
<p>
By default font weight is bold. You can make it thiner.
</p>
<p>
By default Heading color is bulma.100. You can use any color.
</p>
</ComponentPageDescription>
<ExampleAndCode title="Sizes" id="heading_1">
<:example>
<div class="flex flex-col gap-2 w-full">
<Heading>Heading with default font size</Heading>
<Heading size={16}>Heading with font size 16</Heading>
<Heading size={18}>Heading with font size 18</Heading>
<Heading size={20}>Heading with font size 20</Heading>
<Heading size={24}>Heading with font size 24</Heading>
<Heading size={32}>Heading with font size 32</Heading>
<Heading size={48}>font size 48</Heading>
<Heading size={56}>font size 56</Heading>
<Heading size={64}>font size 64</Heading>
<Heading size={72}>font size 72</Heading>
</div>
</:example>
<:code>{heading_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Is regular" id="heading_2">
<:example>
<div class="flex flex-col gap-2 w-full">
<Heading size={24}>Heading with default font weight</Heading>
<Heading size={24} is_regular>
Heading with font-weight: regular
</Heading>
</div>
</:example>
<:code>{heading_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Color" id="heading_3">
<:example>
<div class="flex flex-col gap-2 w-full">
<Heading size={24}>Heading with default color</Heading>
<Heading size={24} color="trunks">
Heading with defined color
</Heading>
<Heading size={24} color="piccolo">
Heading with defined color
</Heading>
<Heading size={24} color="krillin">
Heading with defined color
</Heading>
</div>
</:example>
<:code>{heading_3_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def heading_1_code do
"""
<Heading>Heading with default font size</Heading>
<Heading size=16>Heading with font size 16</Heading>
<Heading size=18>Heading with font size 18</Heading>
<Heading size=20>Heading with font size 20</Heading>
<Heading size=24>Heading with font size 24</Heading>
<Heading size=32>Heading with font size 32</Heading>
<Heading size=48>font size 48</Heading>
<Heading size=56>font size 56</Heading>
<Heading size=64>font size 64</Heading>
<Heading size=72>font size 72</Heading>
"""
end
def heading_2_code do
"""
<Heading size=24>Heading with default font weight</Heading>
<Heading size=24 is_regular=true>
Heading with font-weight: regular
</Heading>
"""
end
def heading_3_code do
"""
<Heading size=24>Heading with default color</Heading>
<Heading size=24 color="trunks">
Heading with defined color
</Heading>
<Heading size=24 color="piccolo">
Heading with defined color
</Heading>
<Heading size=24 color="krillin">
Heading with defined color
</Heading>
"""
end
end