Packages
moon
2.82.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/design/snackbar_page.ex
defmodule MoonWeb.Pages.Design.SnackbarPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.SnackbarExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/snackbar",
name: "Snackbar"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_in_progress
is_aria_support
is_rtl_support
title="Snackbar"
image="facing/components/snackbar.png"
>
<p>
The snackbar component is a non-disruptive message that appears on the interface to provide quick, at-a-glance feedback on the outcome of an action.
</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
SnackbarExample.Default,
SnackbarExample.Positions,
SnackbarExample.Options,
SnackbarExample.SemanticTypes,
SnackbarExample.AutoClose,
SnackbarExample.Customization
]} />
<PropsTable
title="Snackbar props"
data={[
%{
:name => ~c"trigger",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Clickable trigger element, see Snackbar.Trigger"
},
%{
:name => ~c"content",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Content of Snackbar item, see Snackbar.Content"
},
%{
:name => ~c"icon",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Icon slot of Snackbar item, see Snackbar.Icon"
},
%{
:name => ~c"close",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Close button slot of Snackbar item, see Snackbar.Close"
},
%{
:name => ~c"position",
:type => ~c"top-left | top-center | top-right | bottom-left | bottom-center | bottom-right",
:required => ~c"No",
:default => ~c"top-right",
:description => ~c"Close button slot of Snackbar item, see Snackbar.Close"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
},
%{
:name => ~c"is_open",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether or not the snackbar is open"
}
]}
/>
<PropsTable
title="Snackbar.Content props"
data={[
%{
:name => ~c"header",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Header slot of Snackbar item, see Snackbar.Header"
},
%{
:name => ~c"message",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Message slot of Snackbar item, see Snackbar.Message"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
<PropsTable
title="Snackbar.Header props"
data={[
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Header of Snackbar item"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
<PropsTable
title="Snackbar.Message props"
data={[
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Message of Snackbar item"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
<PropsTable
title="Snackbar.Icon props"
data={[
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Icon slot of Snackbar item"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
</Page>
"""
end
def component_anatomy do
"""
<Snackbar>
<Snackbar.Trigger>...</Snackbar.Trigger>
<Snackbar.Icon>...</Snackbar.Icon>
<Snackbar.Content>
<Snackbar.Header>...</Snackbar.Header>
<Snackbar.Message>...</Snackbar.Message>
</Snackbar.Content>
<Snackbar.Close />
</Snackbar>
"""
end
end