0.0.2 • Published 3 years ago

@autots/floornav v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@autots/floornav

Thanks to Floornav

A floor navigation component based on typescript and vanilla js.

Features

  • typescript features & vanilla js

Installing

$ npm install @autots/floornav -S

Using yarn:

$ yarn add @autots/floornav

Example

layouts

<div id="floornav">
  <a href="#floor1">1楼</a>
  <a href="#floor2">2楼</a>
  <a href="#floor3">3楼</a>
  <a href="#floor4">4楼</a>
  <a href="#floor5">5楼</a>
  <a href="#floor6">6楼</a>
</div>

<div class="floor">占位</div>
<div id="floor1" class="floor">这是1楼</div>
<div id="floor2" class="floor">这是2楼</div>
<div id="floor3" class="floor">这是3楼</div>
<div id="floor4" class="floor">这是4楼</div>
<div id="floor5" class="floor">这是5楼</div>
<div id="floor6" class="floor">这是6楼</div>
<div class="floor">占位</div>

Note: Please follow the HTML structure strictly: (#floorcontainer a[href="#(targetId)"])

import as a module

import Floornav from '@autots/floornav';

// 1. The simplest way
new Floornav();

import as a lib

<script src="dist/floornav.browser.min.js"></script>

<script>
  var myFloornav = new AutoTs.Floornav(id, config);
</script>

Config

keyDescriptionDefaultTypeOptional
idthe id of the floor element--stringfalse
containerscroll containerwindowwindow / stringtrue
basebaselinecentertop/ center/ bottomtrue
thresholdthreshold0numbertrue
scrollOffsetthe offset from baseline0numbertrue
activeClassthe active class of the current floor itemactivestringtrue
showClassclass at the floor displayshowstringtrue
isToggleShowWhether the floor disappears with the contenttruebooleantrue
onNavChangethe navigation active callback--functiontrue

Develop

The entry file must be named as index.ts and put this file in the src root directory.

Todo