Packages
moon
2.83.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/pages/components/typography/caption_page.ex
# This component is deprecated, use /components/typography/ css classes
defmodule MoonWeb.Pages.Components.Typography.CaptionPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Caption
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/caption",
name: "Caption"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"color_class",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Component or element which Tooltip wraps around"
},
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"true",
:default => ~c"-",
:description => ~c"Content for caption"
},
%{
:name => ~c"text_align_class",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"TODO - Text alignment (this should be an enum set of values)"
},
%{
:name => ~c"is_regular",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Is regular font weight"
}
]
)
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="Caption">
<p>
Component for presenting short info.
</p>
<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>
</ComponentPageDescription>
<ExampleAndCode title="Colors" id="example_1">
<:example>
<Caption>Defaul color is Bulma</Caption>
<Caption color_class="text-piccolo">Piccolo</Caption>
<Caption color_class="text-trunks">Trunks</Caption>
<Caption color_class="text-krillin">Krillin</Caption>
</:example>
<:code>{example_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Text Align" id="example_2">
<:example>
<Caption>Text-align is not specified</Caption>
<Caption text_align_class="text-center">Centered text</Caption>
<Caption text_align_class="text-right">Right alignment</Caption>
</:example>
<:code>{example_2_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def example_1_code do
"""
<Caption>Defaul color is Bulma</Caption>
<Caption color_class="text-piccolo">Piccolo</Caption>
<Caption color_class="text-trunks">Trunks</Caption>
<Caption color_class="text-krillin">Krillin</Caption>
"""
end
def example_2_code do
"""
<Caption>Text-align is not specified</Caption>
<Caption text_align_class="text-center">Centered text</Caption>
<Caption text_align_class="text-right">Right alignment</Caption>
"""
end
end