Packages
moon
2.74.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
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>
<Tabs.Tab class="hover:text-roshi after:bg-roshi" selected_class="text-roshi after:scale-x-100">Header with all options</Tabs.Tab>
<Tabs.Tab class="hover:text-roshi after:bg-roshi" selected_class="text-roshi after:scale-x-100">Header with title only</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}
/>
</Tabs.Panel>
<Tabs.Panel>
<HeaderOptions.TitleOnly
{=@has_other_button_group}
{=@has_other_left_button}
{=@has_other_right_button}
{=@change_title}
{=@title}
/>
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</Card>
"""
end
end