Packages
moon
2.90.1
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/parts/header.ex
defmodule Moon.Parts.Header do
@moduledoc false
use Moon.StatelessComponent
@doc "Id for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "If only Title is given"
prop(title_only, :boolean)
@doc "If is table header"
prop(is_table_header, :boolean, default: false)
@doc "Default slot"
slot(default)
@doc "Buttons slot"
slot(buttons)
@doc "Title only slot"
slot(title)
def render(assigns) do
~F"""
<header
{=@id}
data-testid={@testid}
class={merge([
[
"w-full sticky top-0 bg-goku min-h-[5rem] theme-moon-dark flex flex-col z-10",
"bg-transparent rounded-3xl": @is_table_header
],
@class
])}
>
<#slot />
<#slot
{@title}
context_put={
is_table_header: @is_table_header
}
/>
<#slot
{@buttons}
context_put={
title_only: slot_assigned?(:title) && !slot_assigned?(:default)
}
/>
</header>
"""
end
end