@frankhoodbs/scroll-x-navbar-cmp

Scroll X Navbar Component

A component that renders a horizontal navigation bar that supports scrolling both through dragging and through navigation buttons. The elements inside the navigation bar are injected via a slot, allowing for greater flexibility in the content that can be inserted.

Componente che visualizza una barra di navigazione orizzontale che supporta lo scorrimento sia tramite trascinamento che tramite pulsanti di navigazione. Gli elementi all'interno della barra di navigazione sono inniettati tramite uno slot, permettendo una maggiore flessibilità nel contenuto che può essere inserito.

API Reference

Slots

Name	Description
prev-icon	Slot for the icon prev used if the prop data-navigation is passed with value true. If the slot is leaved empty a default icon is used instead.
next-icon	Slot for the icon next used if the prop data-navigation is passed with value true. If the slot is leaved empty a default icon is used instead.
default	Required. Slot for contents. Pass a list of <li> inside here.

Props

Name	Type	Description
data-active-tab-id	string	Required Id of the active tab.
data-navigation	boolean	Enable/disable navigation through prev and next buttons.
data-slot-ready	any	Needed only in case of async data slotted in the default slot; indicates that the content passed are fully loaded.
data-ul-role	string	Pass a role to the <ul> for accessibility reasons.

CSS variables

Name	default	Description
--scroll-x-navbar-spacing-x	24px	Lateral padding of the navigation bar
--scroll-x-navbar-button-z-index	1	Navigation buttons z-index
--scroll-x-navbar-button-spacing-x	24px	Lateral distance of the navigation buttons
--scroll-x-navbar-button-width	36px	Width of the navigation buttons
--scroll-x-navbar-button-height	36px	Height of the navigation buttons
--scroll-x-navbar-button-border-width	1px	Border width of the navigation buttons
--scroll-x-navbar-button-border-style	solid	Border style of the navigation buttons
--scroll-x-navbar-button-border-color	rgba(#000000, 0.75)	Border color of the navigation buttons
--scroll-x-navbar-button-border-radius	0	Border radius of the navigation buttons
--scroll-x-navbar-button-bg-color	rgba(#ffffff, 0.75)	Background-color of the navigation buttons
--scroll-x-navbar-button-box-shadow	none	Box shadow of the navigation buttons
--scroll-x-navbar-button-color	rgba(#000000, 0.75)	Color of the navigation buttons
--scroll-x-navbar-button-icon-width	auto	Width of the icon inside the navigation buttons
--scroll-x-navbar-button-icon-height	auto	Height of the icon inside the navigation buttons
--scroll-x-navbar-button-disabled-border-width	1px	Border width of the navigation buttons when is disabled
--scroll-x-navbar-button-disabled-border-style	solid	Border style of the navigation buttons when is disabled
--scroll-x-navbar-button-disabled-border-color	rgba(#cbcbcb, 0.5)	Border color of the navigation buttons when is disabled
--scroll-x-navbar-button-disabled-bg-color	rgba(#ffffff, 0.75)	Background-color of the navigation buttons when is disabled
--scroll-x-navbar-button-disabled-box-shadow	none	Box shadow of the navigation buttons when is disabled
--scroll-x-navbar-button-disabled-color	rgba(#cbcbcb, 0.5)	Color of the navigation buttons when is disabled
--scroll-x-navbar-border-bottom-spacing-x	24px	Lateral distance of the navigation bar border bottom
--scroll-x-navbar-border-bottom-width	1px	Border width of the navigation bar border bottom
--scroll-x-navbar-border-bottom-style	solid	Border style of the navigation bar border bottom
--scroll-x-navbar-border-bottom-color	rgba(#cbcbcb, 0.75)	Border color of the navigation bar border bottom
--scroll-x-navbar-border-bottom-content	''	Border bottom is rendered, pass none instead of '' if you want to remove the border bottom
--scroll-x-navbar-tab-bg-color	#ffffff	Background-color of the tab
--scroll-x-navbar-tab-color	#cbcbcb	Color of the tab
--scroll-x-navbar-tab-active-bg-color	#ffffff	Background-color of the tab when is active
--scroll-x-navbar-tab-active-color	#000000	Color of the tab when is active
--scroll-x-navbar-tab-hover-bg-color	#ffffff	Background-color of the tab when is in hover
--scroll-x-navbar-tab-hover-color	#000000	Color of the tab when is in hover
--scroll-x-navbar-tab-padding	1.5rem 1rem	Padding of the tab

Usage/Examples

<scroll-x-navbar-cmp
  :data-active-tab-id="`ScrollXNavbarCmp-1-tab-${activeTabId}`"
  @navigation="activeTabId = +$event.replace('ScrollXNavbarCmp-1-tab-', '')"
>
  <li
    v-for="n in 5"
    :key="`tab-${n}`"
    :id="`ScrollXNavbarCmp-1-tab-${n}`"
    :class="['tab', { active: n.toString() === activeTabId }]"
    @click="activeTabId = n.toString()"
  >
    <span class="tab-label">Tab Navigation Item Number {{ n }}</span>
  </li>
</scroll-x-navbar-cmp>

const activeTabId = ref<string>('1');

Screenshots