Sha256: 57dc299a481f575f96615f4001ee5fee4e15f45fc980260714631b6fabf1e6b0
Contents?: true
Size: 1.93 KB
Versions: 958
Compression:
Stored size: 1.93 KB
Contents
<%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
<%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
<%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
<%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
<%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
<% end %>
<div id="about">
<%= pb_rails("body", props: { text: "This is about!" }) %>
</div>
<div id="case_studies">
<%= pb_rails("body", props: { text: "This is case studies!" }) %>
</div>
<div id="service">
<%= pb_rails("body", props: { text: "This is service!" }) %>
</div>
<div id="contacts">
<%= pb_rails("body", props: { text: "This is contacts!" }) %>
</div>
<script>
// The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
// The active prop can be used to highlight this active state.
const navItemClass = "pb_nav_list_kit_item"
const navItemActiveClass = "pb_nav_list_kit_item_active"
const dataNavItems = "[data-pb-tab-target]"
const navItemTabs = document.querySelectorAll(dataNavItems)
navItemTabs.forEach(navItemTab => {
navItemTab.addEventListener("click", event => {
const navItemTabs = document.querySelectorAll(dataNavItems)
navItemTabs.forEach(navItemTab => {
if (navItemTab === event.target.closest(dataNavItems)) {
navItemTab.classList.add(navItemActiveClass)
navItemTab.classList.remove(navItemClass)
} else {
if (navItemTab.classList.contains(navItemActiveClass)) {
navItemTab.classList.remove(navItemActiveClass)
navItemTab.classList.add(navItemClass)
}
}
})
})
})
</script>
Version data entries
958 entries across 958 versions & 2 rubygems