@projectfive/v-components v1.3.6

Components

Fixedheader

Sticky header at the top of the page, that hides on scroll down and re-appears on scroll up.

• treshold: number, default = 100. - defines scroll treshold before header is shown / hidden.

  <FixedHeaderComponent>
      <div class="header">Dit is fixed content</div>
  </FixedHeaderComponent>
  
  <style>
  .fixedheader {
      position: sticky;
      top: 0;
      z-index: 50;
      transition: transform .3s ease;
  }
      .fixedheader.fixedheader--down {
          transform: translateY(-100%);
      }
  </style>

Modals

Modal plugin

• add the ModalPlugin to main.js

import { ModalPlugin } from '@projectfive/v-components';
createApp(App).use(ModalPlugin);

• add the ModalComponent to App.vue and the template.
• add the modal-Loader to App.vue and pass to ModalComponent

import { ModalComponent } from '@projectfive/v-components';
// Note, make specific modal-folder loader for vite.
import Loader from './Loader.vue';
<Modals :loader="Loader" />

Slider

• items: Array with item objects, items for the slider
• automatic: boolean, default = false
• delay: number, default = 6000. Only used when automatic=true

• scroll: boolean, default = false. If slider uses scroll-snap

• item: Receives item Obj from items-list. Visible when .active class is applied.

  • item - item obj
  • next - action
  • prev - action
  • goto - action(index)
  • index - current index
  • active - boolean
  • activeIndex - number
  • count - number, total amount of slides
• default: Slot content is placed once, after all slides
  • next - action
  • prev - action
  • goto - action(index)
  • activeIndex - number
  • count - number, total amount of slides
• next: Slot for next-arrow. :action-function is available

• prev: Slot for prev-arrow. :action-function is available

• slide: number - index of active slide

  <SliderComponent>
      :items="[
          { src: 'imgpath-1' },
          { src: 'imgpath-2' },
          { src: 'imgpath-3' },
      ]"
      :automatic="true"
      :delay="4000"
  >
      <template v-slot:item="{ item, next, prev, goto, active, activeIndex, count }">
          <img
              :src="item.src"
          />
      </template>
  </SliderComponent>

Items

• items: array with item objects
• loading: boolean
• emptyLoadInstances: number - how many loading-slots are inserted when items is empty
• appendLoadInstances: number - how many loading-slots are inserted when items is not empty

• item - Receives item Obj from items-list. Visible when .active class is applied.
  • item - item obj
• loading - visible when loading; only element or appended depending on items-prop array length.
• empty - visible when items-prop is empty array
• loadmore - visible when not loading; useful for loadmore buttons etc.

• atBottom