Creates a list of sections with a nav that provides a link to each section. The current section's
li is given the class
active in the
If you do not have
yarnyou can download it here.
Instructions for global registration
yarn add @160over90/vue-floating-list-view
Include in main.js (app entry point)
import ListView from '@160over90/vue-floating-list-view'; Vue.use(ListView);
Instructions for editing this package
Compiles and hot-reloads for development
yarn run serve
A simple example of the ListView component. The ListViewSection components are placed inside of a ListView component. The content inside of the ListViewSection components can be anything and does not have to be text.
<ListViewContainer> <ListViewSection label="Section1">Section 1</ListViewSection> <ListViewSection label="Section2">Section 2</ListViewSection> <ListViewSection label="Section3">Section 3</ListViewSection> </ListViewContainer>
rootMargin (Number, Default: 0) The root margin for intersection observer to determine when to recalculate the active element. If the nav is fixed, this is usually the height of the nav.
ordered (Boolean, Default: false) Determines whether the list in the nav should be an ordered or unordered list.
smoothScroll (Boolean, Default: false) Smooth scrolls to section when nav item is clicked. Polyfill needed if browser doesn't have native support.
label (String, Required) The section label used in the navigation. The label is also slugified to create an id for the section.
Polyfills are needed for intersection observer and smooth scrolling on browsers without native support. Recommended polyfill packages below.