Packages
phoenix_webcomponent
3.2.2
3.2.4
3.2.3
3.2.2
3.2.1
3.2.0
3.1.5
3.1.4
3.1.3
3.1.2
3.1.1
3.1.0
2.8.0
2.7.0
2.6.0
2.5.4
2.5.3
2.5.2
2.5.1
2.5.0
2.4.0
2.3.6
2.3.5
2.3.4
2.3.3
2.3.2
2.3.1
2.2.3
2.2.2
2.2.1
2.2.0
2.1.4
2.1.3
2.1.2
2.1.1
2.1.0
2.0.0
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.0
1.1.1
1.1.0
1.0.0
1.0.0-beta.4
1.0.0-beta.3
1.0.0-beta.2
0.0.0
Phoenix view functions for working with WebComponent
Current section
Files
Jump to
Current section
Files
lib/phoenix_webcomponent/page_header.ex
defmodule Phoenix.WebComponent.PageHeader do
@moduledoc """
render Page Header
"""
use Phoenix.WebComponent, :html
@doc """
Generates a Page header.
## Example
<.wc_page_header>
<:menu to={~p"/storybook"}>
Storybook
</:menu>
<:user_profile>
(^_^)
</:user_profile>
</.wc_page_header>
"""
@doc type: :component
attr(:id, :string,
default: "wc-page-header-header",
doc: """
html attribute id
"""
)
attr(:nav_id, :string,
default: "wc-page-header-nav",
doc: """
nav html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:nav_class, :any,
default: "",
doc: """
nav html attribute class
"""
)
slot(:menu,
required: false,
doc: """
Appbar menus
"""
) do
attr(:class, :string)
attr(:to, :string)
end
slot(:user_profile,
required: false,
doc: """
Appbar right side user_profile.
"""
)
def wc_page_header(assigns) do
~H"""
<nav
id={@nav_id}
class={[
"w-full h-12",
"flex items-center flex-none",
"transition-all",
"fixed hidden",
@nav_class
]}
>
<div class={["container mx-auto", "flex flex-row justify-between items-center"]}>
<div class="flex flex-row gap-4">
<a
:for={menu <- @menu}
class={[
"py-2 px-6",
"text-lg font-semibold leading-6 text-center",
"hover:opacity-50",
Map.get(menu, :class, "")
]}
href={Map.get(menu, :to, false)}
>
<%= render_slot(menu) %>
</a>
</div>
<div class="flex">
<%= render_slot(@user_profile) %>
</div>
</div>
</nav>
<header
id={@id}
class={[
"w-full min-h-fit",
"flex flex-col",
@class
]}
>
<nav class={["w-full h-12", "flex items-center flex-none"]}>
<div class={["container mx-auto", "flex flex-row justify-between items-center"]}>
<div class="flex flex-row gap-4">
<a
:for={menu <- @menu}
class={[
"py-2 px-6",
"text-lg font-semibold leading-6 text-center",
"hover:opacity-50",
Map.get(menu, :class, "")
]}
href={Map.get(menu, :to, false)}
>
<%= render_slot(menu) %>
</a>
</div>
<div class="flex">
<%= render_slot(@user_profile) %>
</div>
</div>
</nav>
<div class="flex-1 flex flex-col justify-center items-center">
<%= render_slot(@inner_block) %>
</div>
</header>
<script type="module">
(function() {
function respondToVisibility(element, callback) {
var list = [];
for(let i = 0; i <= 10; i++) {
list.push(i / 10);
}
var options = {
root: null,
rootMargin: "0px",
threshold: list,
};
var observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
callback(entry.intersectionRatio);
});
}, options);
observer.observe(element);
}
var nid = '<%= @nav_id %>';
var hid = '<%= @id %>';
var nel = document.getElementById(nid);
var hel = document.getElementById(hid);
respondToVisibility(hel, function(intersectionRatio) {
if (intersectionRatio <= 0.5) {
nel.classList.remove('hidden');
nel.style.opacity = 1 - intersectionRatio;
} else {
nel.classList.add('hidden');
}
});
})();
</script>
"""
end
end