Packages
moon
2.78.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/banner_page.ex
defmodule MoonWeb.Pages.Components.BannerPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Banner
alias Moon.Components.Button
alias Moon.Icons.ControlsClose
alias MoonWeb.Components.Page
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.ComponentPageDescription
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/banner",
name: "Banner"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Banner">
<p>
Banners are used to show users important, succinct messages, or space alerts, that users should know about. They can interact or ignore banners at any time, as they are non-modal. What to take note of when using banners Only one banner should be shown at a time. Banners require user action in order to be dismissed. Messages should consist of no longer than one headline, one description sentence and one short call-to-action.
</p>
</ComponentPageDescription>
<ExampleAndCode id="banner_1" title="Default">
<:example>
<Banner title="Title here" description="Lorem ipsum dolor..." />
</:example>
<:code>{banner_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="banner_2" title="Buttons">
<:example>
<Banner title="Title here" description="Lorem ipsum dolor...">
<:buttons_slot>
<Button variant="secondary">Discard</Button>
<Button>Confirm</Button>
</:buttons_slot>
</Banner>
</:example>
<:code>{banner_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="banner_3" title="Header Icon">
<:example>
<Banner title="Title here" description="Lorem ipsum dolor...">
<:icon_header_slot>
<ControlsClose />
</:icon_header_slot>
</Banner>
</:example>
<:code>{banner_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="banner_4" title="Mobile">
<:example>
<Banner title="Title here" description="Lorem ipsum dolor..." is_mobile>
<:buttons_slot>
<Button variant="secondary">Discard</Button>
<Button>Confirm</Button>
</:buttons_slot>
</Banner>
</:example>
<:code>{banner_4_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="banner_5" title="Single Line">
<:example>
<Banner
description="Your email is not verified. Verify to enable withdrawals."
is_multiline={false}
>
<:link_slot>
<Button variant="ghost">Resend verification link to email ›</Button>
</:link_slot>
</Banner>
</:example>
<:code>{banner_5_code()}</:code>
</ExampleAndCode>
</Page>
"""
end
def banner_1_code do
"""
<Banner title="Title here" description="Lorem ipsum dolor..." />
"""
end
def banner_2_code do
"""
<Banner title="Title here" description="Lorem ipsum dolor..." >
<:buttons_slot>
<Button variant="secondary">Discard</Button>
<Button>Confirm</Button>
</:buttons_slot>
</Banner>
"""
end
def banner_3_code do
"""
<Banner title="Title here" description="Lorem ipsum dolor..." >
<:icon_header_slot>
<ControlsClose />
</:icon_header_slot>
</Banner>
"""
end
def banner_4_code do
"""
<Banner title="Title here" description="Lorem ipsum dolor..." is_mobile={true}>
<:buttons_slot>
<Button variant="secondary">Discard</Button>
<Button>Confirm</Button>
</:buttons_slot>
</Banner>
"""
end
def banner_5_code do
"""
<Banner
description="Your email is not verified. Verify to enable withdrawals."
is_multiline={false}
>
<:link_slot>
<Button variant="ghost">Resend verification link to email ›</Button>
</:link_slot>
</Banner>
"""
end
end