@laomao800/vue-nav-box

vue-nav-box

Demo

https://laomao800.github.io/vue-nav-box/

Preview

Usage

<template>
  <nav-box height="360px" :foldable="true">
    <nav-box-pane>
      <div slot="title">Form 1 <strong style="color:#f90">(Html surport)</strong></div>
      <!-- <example-form /> -->
    </nav-box-pane>
    <nav-box-pane title="Form 2 (Fold by default)" :fold="true">
      <!-- <example-form /> -->
    </nav-box-pane>
    <nav-box-pane title="Form 3 (Can't fold)" :foldable="false">
      <!-- <example-form /> -->
    </nav-box-pane>
  </nav-box>
</template>

<script>
import { NavBox, NavBoxPane } from '@laomao800/vue-nav-box'

export default {
  components: {
    NavBox,
    NavBoxPane
  }
}
</script>

Props

<nav-box />

Prop	Type	Default	Info
height	String, Number	null	Navigation wrap box's height. e.g. 500, 500px
navWidth	String, Number	null	Navigation sidebar width. e.g. 160, 160px
navePosition	String	''	Navigation sidebar position. e.g. 'left'
duration	Number	400	Scroll animation time.
offsetTop	Number	0	Amount of space between top of wrapper and the section to active.
foldable	Boolean	false	Enable child panes foldable
navHidden	Boolean	false	Whether hide the navbar

<nav-box-pane />

needs to wrap in the <nav-box />

Prop	Type	Default	Info
title	String	null	Section title
foldable	Boolean	true	Specify the child pane foldable. Only on <nav-box /> foldable is true
fold	Boolean	false	Specify the child pane whether fold by default. Only on <nav-box /> foldable is true

Project scrips

# Develop
yarn run serve

# Build component dist
yarn run build:lib

# Build example page
yarn run build:example