Packages
moon
2.72.3
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/menu_item_example/expand_collapse.ex
defmodule MoonWeb.Examples.Design.MenuItemExample.ExpandCollapse do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.MenuItem
alias Moon.Components.Lego
alias Moon.Icons.{ControlsChevronDown, ControlsChevronUp}
data(expanded0, :boolean, default: false)
data(expanded1, :boolean, default: true)
data(expanded2, :boolean, default: false)
def render(assigns) do
~F"""
<div class="flex justify-around w-full">
<div class="w-56 bg-goku flex flex-col gap-2 rounded-moon-s-lg p-4">
<MenuItem>Vision</MenuItem>
<MenuItem>Getting started</MenuItem>
<MenuItem>How to contribute?</MenuItem>
<MenuItem>Colours</MenuItem>
<MenuItem>Tokens</MenuItem>
<MenuItem>Transform SVG</MenuItem>
<MenuItem>Manifest</MenuItem>
<MenuItem role="switch" is_selected={@expanded0} title="Tailwind" on_click="on_expand0" />
{#if @expanded0}
<MenuItem>
<span class="w-6" />
<Lego.Title>
Accordion</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Avatar</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Breadcrumb</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Button</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Checkbox</Lego.Title>
</MenuItem>
{/if}
</div>
<div class="w-56 bg-goku flex flex-col gap-2 rounded-moon-s-lg p-4">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">B</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Bitcasino</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" :on-click="on_expand1" :values={is_selected: !@expanded1}>
<ControlsChevronDown :if={!@expanded1} />
<ControlsChevronUp :if={@expanded1} />
</span>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>
Customer...</Lego.Title>
</MenuItem>
{#if @expanded1}
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
{/if}
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>Quality...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" :on-click="on_expand2" :values={is_selected: !@expanded2}>
<Lego.ChevronUpDown is_selected={@expanded2} />
</span>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
{#if @expanded2}
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
{/if}
<div class="flex flex-col gap-2 rounded-moon-s-lg">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Sportsbet</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Customer...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>Quality...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
</div>
<div class="flex flex-col gap-2 rounded-moon-s-lg">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">L</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Livecasino</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Customer...</Lego.Title>
</MenuItem>
</div>
</div>
</div>
"""
end
def handle_event("on_expand" <> number, params, socket) do
{:noreply, assign(socket, :"expanded#{number}", Map.get(params, "is-selected") == "true")}
end
def code() do
"""
alias Moon.Design.MenuItem
alias Moon.Components.Lego
alias Moon.Icons.{ControlsChevronDown, ControlsChevronUp}
data(expanded0, :boolean, default: false)
data(expanded1, :boolean, default: true)
data(expanded2, :boolean, default: false)
def render(assigns) do
~F\"""
<div class="flex justify-around w-full">
<div class="w-56 bg-goku flex flex-col gap-2 rounded-moon-s-lg p-4">
<MenuItem>Vision</MenuItem>
<MenuItem>Getting started</MenuItem>
<MenuItem>How to contribute?</MenuItem>
<MenuItem>Colours</MenuItem>
<MenuItem>Tokens</MenuItem>
<MenuItem>Transform SVG</MenuItem>
<MenuItem>Manifest</MenuItem>
<MenuItem role="switch" is_selected={@expanded0} title="Tailwind" on_click="on_expand0" />
{#if @expanded0}
<MenuItem>
<span class="w-6" />
<Lego.Title>
Accordion</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Avatar</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Breadcrumb</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Button</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<Lego.Title>
Checkbox</Lego.Title>
</MenuItem>
{/if}
</div>
<div class="w-56 bg-goku flex flex-col gap-2 rounded-moon-s-lg p-4">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">B</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Bitcasino</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" :on-click="on_expand1" :values={is_selected: !@expanded1}>
<ControlsChevronDown :if={!@expanded1} />
<ControlsChevronUp :if={@expanded1} />
</span>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>
Customer...</Lego.Title>
</MenuItem>
{#if @expanded1}
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
{/if}
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>Quality...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" :on-click="on_expand2" :values={is_selected: !@expanded2}>
<Lego.ChevronUpDown is_selected={@expanded2} />
</span>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
{#if @expanded2}
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-6" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>Sub nested item</Lego.Title>
</MenuItem>
{/if}
<div class="flex flex-col gap-2 rounded-moon-s-lg">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">S</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Sportsbet</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Customer...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">CX</p>
</span>
<Lego.Title>Quality...</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Responsible...</Lego.Title>
</MenuItem>
</div>
<div class="flex flex-col gap-2 rounded-moon-s-lg">
<MenuItem>
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">L</p>
</span>
<Lego.Title>
<p class="leading-6 text-moon-14 font-semibold">Livecasino</p>
</Lego.Title>
</MenuItem>
<MenuItem>
<span class="w-3" />
<span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
<p class="leading-4 font-semibold text-moon-10">RG</p>
</span>
<Lego.Title>Customer...</Lego.Title>
</MenuItem>
</div>
</div>
</div>
\"""
end
def handle_event("on_expand0" <> number, params, socket) do
{:noreply, assign(socket, :"expanded0", Map.has_key?(params, "is_selected"))}
end
def handle_event("on_expand1" <> number, params, socket) do
{:noreply, assign(socket, :"expanded1", Map.has_key?(params, "is_selected"))}
end
def handle_event("on_expand2" <> number, params, socket) do
{:noreply, assign(socket, :"expanded2", Map.has_key?(params, "is_selected"))}
end
"""
end
end