@pnx-mixtape/elevator

@pnx-mixtape/elevator

Documentation and examples: Elevator

Installation

npm install @pnx-mixtape/elevator --save

How to use

CSS

• PostCSS workflow: @import '@pnx-mixtape/elevator';
• Native CSS: @import url('dist/elevator.css');
• Link tag: <link href="dist/elevator.css" rel="stylesheet" type="text/css">

Web Components

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

• ElevatorBase import: import '@pnx-mixtape/elevator/ElevatorBase'; and be sure to include <mx-elevator> around the <nav /> tag.
• Use the [data-content] attribute to specify where to look for headings (required).
• Use the [data-headings] attribute to customise the heading levels. Default is h2.

<mx-elevator data-content=".page__sections" data-headings="h2, h3">
  <nav class="elevator nav nav--jump">
    <h4>Jump to Section</h4>
    <ul></ul>
  </nav>
</mx-elevator>

<div class="page__sections">
  <h2 id="section">Section title</h2>
</div>

See twig files for all HTML examples.

Vanilla JS (to be deprecated)

• ES6 import: import { Elevator, ElevatorOverflow } from '@pnx-mixtape/elevator';
• ES6 submodule import: import ElevatorOverflow from '@pnx-mixtape/elevator/elevator-overflow';
• Script tag: <script src="dist/elevator.js" type="text/javascript"></script>

HTML

<nav data-elevator class="elevator nav nav--jump">
  <h4>Jump to Section</h4>
  <ul></ul>
</nav>

<div class="page__sections">
  <h2 id="section">Section title</h2>
</div>