Packages
moon
2.77.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/components/show_room_page/wizard/header_options.ex
defmodule MoonWeb.Components.ShowRoomPage.Wizard.HeaderOptions do
@moduledoc false
use MoonWeb, :stateless_component
alias MoonWeb.Components.ShowRoomPage.Wizard.Card
alias Moon.Design.Tabs
alias MoonWeb.Components.ShowRoomPage.Wizard.HeaderOptions
alias Moon.Parts.Button
prop(light_header, :string)
prop(toggle_header_theme, :event)
prop(has_breadcrumbs, :boolean, default: true)
prop(has_button_group, :boolean, default: true)
prop(has_left_button, :boolean, default: true)
prop(has_right_button, :boolean, default: true)
prop(has_other_button_group, :boolean, default: true)
prop(has_other_left_button, :boolean, default: true)
prop(has_other_right_button, :boolean, default: true)
prop(change_title, :event)
prop(change_default_title, :event)
prop(change_description, :event)
prop(header_change, :event)
prop(title, :string)
prop(default_title, :string)
prop(description, :string)
prop(tab_index, :integer)
def render(assigns) do
~F"""
<Card>
<:title>Header customization playground</:title>
<:description>Witness the adaptability of Moon's headers across different screen dimensions. Explore the options available and find the perfect fit for your BackOffice environment.</:description>
<Tabs id="header_options" class="pb-4" on_change={@header_change} selected={@tab_index}>
<Tabs.List class="gap-6">
<Tabs.Tab
class="hover:text-roshi after:bg-roshi px-0"
selected_class="text-roshi after:scale-x-100"
>Header with all options
<Button.Success
class="md:whitespace-nowrap whitespace-normal md:h-6 h-8"
as="a"
size="xs"
:if={@tab_index == 0}
href="https://github.com/coingaming/moon/blob/main/lib/moon_web/components/show_room_page/header/with_title_and_description.ex"
target="_blank"
>see code</Button.Success>
</Tabs.Tab>
<Tabs.Tab
class="hover:text-roshi after:bg-roshi px-0"
selected_class="text-roshi after:scale-x-100"
>Header with title only
<Button.Success
class="md:whitespace-nowrap whitespace-normal md:h-6 h-8"
as="a"
size="xs"
:if={@tab_index == 1}
href="https://github.com/coingaming/moon/blob/main/lib/moon_web/components/show_room_page/header/with_title.ex"
target="_blank"
>see code</Button.Success>
</Tabs.Tab>
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel>
<HeaderOptions.Default
{=@has_breadcrumbs}
{=@has_button_group}
{=@has_left_button}
{=@has_right_button}
{=@change_default_title}
{=@change_description}
{=@default_title}
{=@description}
{=@light_header}
{=@toggle_header_theme}
/>
</Tabs.Panel>
<Tabs.Panel>
<HeaderOptions.TitleOnly
{=@has_other_button_group}
{=@has_other_left_button}
{=@has_other_right_button}
{=@change_title}
{=@title}
{=@light_header}
{=@toggle_header_theme}
/>
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</Card>
"""
end
end