Mango UI

Catalog 导航精灵 pass 0.0.13+

基础用法

如果你需要为文章自动生成目录导航，Catalog将比较有用

展开查看
<style>
.nav{
  position: absolute;
  top: 0;
  right: 0px;
}
</style>

<div class="nav">
  <mg-catalog :target-id="'article'"></mg-catalog>
</div>
1
2
3
4
5
6
7
8
9
10
11

target-id 的值为滚动元素的 id ，不传时将默认为body

文章标题

以下demo为 title 属性为文本时的效果
也可以接受布尔值，当title 为 true时，将把第一个h1作为标题 （可见本章导航样式部分）

展开查看
  <mg-catalog :title="'Article Title'" :target-id="'article'"></mg-catalog>
1

导航样式

习惯将导航放到左侧也是可以的

展开查看
<style>
.nav-left{
  position: absolute;
  top: 0;
  left: 0px;
}
</style>

<div class="nav-left">
  <mg-catalog :title="true" :target-id="'article'" :position="'left'"></mg-catalog>
</div>
1
2
3
4
5
6
7
8
9
10
11

Catalog Attributes

参数说明类型可选值默认值
targetId滚动（文章）区域idstring--
widthHash是否改变当页 hashboolean-false
title文章标题boolean/string-false
position居左（右）的样式stringleft/rightright