@laomao800/vue-nav-box
v1.4.0
Published
https://laomao800.github.io/vue-nav-box/
Downloads
31
Readme
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