Packages
moon
2.76.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/chip_example/with_icons.ex
defmodule MoonWeb.Examples.Design.ChipExample.WithIcons do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Chip
alias Moon.Icons.MediaMusic
alias Moon.Icons.SoftwareDownload
def render(assigns) do
~F"""
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left Icon
</Chip>
<Chip size="sm">
Right Icon
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left/Right Icons
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
</Chip>
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left Icon
</Chip>
<Chip>
Right Icon
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left/Right Icons
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
</Chip>
</div>
"""
end
def code() do
"""
alias Moon.Design.Chip
alias Moon.Icons.MediaMusic
alias Moon.Icons.SoftwareDownload
...
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left Icon
</Chip>
<Chip size="sm">
Right Icon
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left/Right Icons
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip size="sm">
<:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
</Chip>
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left Icon
</Chip>
<Chip>
Right Icon
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
Left/Right Icons
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
<:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
</Chip>
<Chip>
<:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
</Chip>
</div>
"""
end
end