Packages
moon
2.80.1
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/breadcrumb_page.ex
defmodule MoonWeb.Pages.Components.BreadcrumbPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias Moon.Components.Breadcrumb
alias Moon.Components.Breadcrumb.Crumb
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/breadcrumb",
name: "Breadcrumb"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"breadcrumbs",
:type => ~c"list of Moon.Components.Breadcrumb.Crumb",
:required => ~c"No",
:default => ~c"[]",
:description => ~c"Crumbs to display"
}
]
)
data(breadcrumb_items_1, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Current Page",
link: "/app/corporate"
}
]
)
data(breadcrumb_items_2, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Corporate",
link: "/app/corporate"
},
%Crumb{
name: "About",
link: "/app/corporate/about"
},
%Crumb{
name: "Jobs",
link: "/app/corporate/about/jobs"
},
%Crumb{
name: "Current Page",
link: "/app/corporate/about/jobs/contact"
}
]
)
data(breadcrumb_items_3, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Corporate",
link: "/app/corporate"
},
%Crumb{
name: "About",
link: "/app/corporate/about"
},
%Crumb{
name: "Current Page",
link: "/app/corporate/about/jobs"
}
]
)
data(breadcrumb_items_4, :list,
default: [
%Crumb{
name: "Current Page",
link: "/app/home"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Breadcrumb">
<DeprecationWarning
name="Breadcrumb"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.BreadcrumbPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Five and more items" id="breadcrumbs_2">
<:example>
<div class="flex justify-center items-center">
<Breadcrumb id="breadcrumb_2" breadcrumbs={@breadcrumb_items_2} />
</div>
</:example>
<:code>{breadcrumb_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Four items" id="breadcrumbs_3">
<:example>
<div class="flex justify-center items-center py-1">
<Breadcrumb id="breadcrumb_3" breadcrumbs={@breadcrumb_items_3} />
</div>
</:example>
<:code>{breadcrumb_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Two items" id="breadcrumbs_1">
<:example>
<div class="flex justify-center items-center py-1">
<Breadcrumb id="breadcrumb_1" breadcrumbs={@breadcrumb_items_1} />
</div>
</:example>
<:code>{breadcrumb_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="One item" id="breadcrumbs_4">
<:example>
<div class="flex justify-center items-center py-1">
<Breadcrumb id="breadcrumb_4" breadcrumbs={@breadcrumb_items_4} />
</div>
</:example>
<:code>{breadcrumb_4_code()}</:code>
</ExampleAndCode>
<PropsTable title="Breadcrumb props" data={@props_info_array} />
</Page>
"""
end
def breadcrumb_1_code do
"""
data breadcrumb_items_1, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Current Page",
link: "/app/corporate"
}
]
<Breadcrumb id="breadcrumb_1" breadcrumbs={@breadcrumb_items_1} />
"""
end
def breadcrumb_2_code do
"""
data breadcrumb_items, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Corporate",
link: "/app/corporate"
},
%Crumb{
name: "About",
link: "/app/corporate/about"
},
%Crumb{
name: "Jobs",
link: "/app/corporate/about/jobs"
},
%Crumb{
name: "Current Page",
link: "/app/corporate/about/jobs/contact"
}
]
<Breadcrumb id="breadcrumb" breadcrumbs={@breadcrumb_items} />
"""
end
def breadcrumb_3_code do
"""
data breadcrumb_items_3, :list,
default: [
%Crumb{
name: "Home",
link: "/app/home"
},
%Crumb{
name: "Corporate",
link: "/app/corporate"
},
%Crumb{
name: "About",
link: "/app/corporate/about"
},
%Crumb{
name: "Current Page",
link: "/app/corporate/about/jobs"
}
]
"""
end
def breadcrumb_4_code do
"""
data breadcrumb_items_4, :list,
default: [
%Crumb{
name: "Current Page",
link: "/app/home"
}
]
<Breadcrumb id="breadcrumb_4" breadcrumbs={@breadcrumb_items_4} />
"""
end
end