@pnx-mixtape/elevator
v3.0.2
Published
elevator component
Downloads
267
Keywords
Readme
@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>