Packages
moon
2.78.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/design/progress/circular_progress_page.ex
defmodule MoonWeb.Pages.Design.Progress.CircularProgressPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.CircularProgressExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/circularprogress",
name: "CircularProgress"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_in_progress
is_aria_support
is_rtl_support
title="CircularProgress"
image="facing/components/circular_progress.png"
>
<p>
A progress indicator (Circular and Linear) is a visual representation of a user's progress through a set of steps, guiding toward the completion of a specified process.</p>
</ComponentPageDescription>
<ExamplesList examples={[
CircularProgressExample.Default,
CircularProgressExample.DifferentSizes,
CircularProgressExample.DifferentValues,
CircularProgressExample.CustomColours
]} />
<PropsTable
title="CircularProgress props"
data={[
%{
:name => ~c"bg_color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"stroke-trunks/[.24]",
:description => ~c"Background colour"
},
%{
:name => ~c"progress_color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"stroke-piccolo",
:description => ~c"Progress bar colour"
},
%{
:name => ~c"size",
:type => ~c"2xs | xs | sm | md | lg",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size of Progress"
},
%{
:name => ~c"value",
:type => ~c"number",
:required => ~c"No",
:default => ~c"0",
:description => ~c"Value of Progress in %"
}
]}
/>
</Page>
"""
end
end