3.0.2 • Published 1 year ago

@pnx-mixtape/elevator v3.0.2

Weekly downloads
57
License
MIT
Repository
github
Last release
1 year ago

@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>
3.0.2

1 year ago

3.0.0-alpha.0

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

1.0.4

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.0-alpha.3

3 years ago

1.0.0-alpha.2

3 years ago

1.0.0-alpha.1

3 years ago

1.0.0-alpha.0

3 years ago

0.9.6

4 years ago

0.9.5

4 years ago

0.9.4

4 years ago

0.4.13

4 years ago

0.4.12

4 years ago

0.9.3

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.8.0

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.4.10

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.5

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.0

5 years ago

0.2.16

5 years ago

0.2.15

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.9

5 years ago

0.2.7

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.3

5 years ago

0.2.0

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago