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/examples/design/snackbar_example/positions.ex
defmodule MoonWeb.Examples.Design.SnackbarExample.Positions do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Snackbar
alias Moon.Design.Button
def render(assigns) do
~F"""
<Snackbar position="top-left" id="snackbar_1">
<Snackbar.Trigger>
<Button variant="outline">Top left</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-left screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="top-center" id="snackbar_2">
<Snackbar.Trigger>
<Button variant="outline">Top center</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-center screen edge</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="top-right" id="snackbar_3">
<Snackbar.Trigger>
<Button variant="outline">Top right</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-right screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-left" id="snackbar_4">
<Snackbar.Trigger>
<Button variant="outline">Bottom left</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-left screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-center" id="snackbar_5">
<Snackbar.Trigger>
<Button variant="outline">Bottom center</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-center screen edge</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-right" id="snackbar_6">
<Snackbar.Trigger>
<Button variant="outline">Bottom right</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-right screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
"""
end
def code() do
"""
alias Moon.Design.Snackbar
alias Moon.Design.Button
...
<Snackbar position="top-left" id="snackbar_1">
<Snackbar.Trigger>
<Button variant="outline">Top left</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-left screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="top-center" id="snackbar_2">
<Snackbar.Trigger>
<Button variant="outline">Top center</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-center screen edge</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="top-right" id="snackbar_3">
<Snackbar.Trigger>
<Button variant="outline">Top right</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at top-right screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-left" id="snackbar_4">
<Snackbar.Trigger>
<Button variant="outline">Bottom left</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-left screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-center" id="snackbar_5">
<Snackbar.Trigger>
<Button variant="outline">Bottom center</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-center screen edge</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
<Snackbar position="bottom-right" id="snackbar_6">
<Snackbar.Trigger>
<Button variant="outline">Bottom right</Button>
</Snackbar.Trigger>
<Snackbar.Content>
<Snackbar.Message>Snackbar at bottom-right screen corner</Snackbar.Message>
</Snackbar.Content>
</Snackbar>
"""
end
end