List View

Features

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 nav.

If you do not have yarn you 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

yarn install

Compiles and hot-reloads for development

yarn run serve

Examples

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>

Props

ListView

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.

ListViewItem

label (String, Required) The section label used in the navigation. The label is also slugified to create an id for the section.

Polyfills

Polyfills are needed for intersection observer and smooth scrolling on browsers without native support. Recommended polyfill packages below.

• Intersection Observer Polyfill
• Smooth Scroll Polyfill

License

MIT