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