Skip to content
Document navigation is automatically generated based on the HTML title (h1-h6) tag
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ 更新文档及测试 Jan 21, 2020
docs fix: 修复在服务端渲染情况下的一些问题 Jan 17, 2020
src
.babelrc 引入flow。优化性能。 Mar 13, 2018
.coveralls.yml Add: coveralls config Nov 30, 2017
.editorconfig
.eslintrc.js Use React's new context API (#1) Feb 20, 2019
.flowconfig 引入flow。优化性能。 Mar 13, 2018
.gitignore first commit Nov 30, 2017
.prettierrc Use React's new context API (#1) Feb 20, 2019
.travis.yml
CHANGELOG.md fix: 修复在服务端渲染情况下的一些问题 Jan 17, 2020
README.md 更新文档及测试 Jan 21, 2020
package.json fix: 修复在服务端渲染情况下的一些问题 Jan 17, 2020
webpack.config.js Use React's new context API (#1) Feb 20, 2019
yarn.lock Use React's new context API (#1) Feb 20, 2019

README.md

Document Nav

Document navigation is automatically generated based on the HTML title (h1-h6) tag.

Install

npm i @rsuite/document-nav --save

Examples

import { Content, Nav } from '@rsuite/document-nav';
import '@rsuite/document-nav/lib/less/index.less';

function render() {
  return (
    <div className="row">
      <div className="col col-md-4">
        <Nav />
      </div>
      <div className="col col-md-20">
        <Content>{require('redeme.md')}</Content>
      </div>
    </div>
  );
}

Style

@import '@rsuite/document-nav/lib/less/index.less';
@doc-nav-active-color: #34c3ff;

使用方法

自动解析手动设置两种使用方式:

自动解析

只需按照如下结构组合代码,document-nav 会自动从 Content 中解析出所有的 h 标签,并生成导航菜单。

  <Nav />
  <Content>
    ...content
  </Content>

可以使用 minLevelmaxLevel 来限制导航的标题级别,如 minLevel = 2maxLevel = 4 时,只有 h2, h3, h4 会被导航。

once 设置为文档只解析一次,用于文章结构不会改变的情况,避免比较解析造成的性能损耗。

deep 设置为最大解析深度,通常标题所在的层级不会太深,如果文档 DOM 很复杂同时解析层级过深的话会大大影响性能。

注意

该方法使用标题作为锚点 ID,请尽量避免标题名称重复。

import { Content, Nav } from '@rsuite/document-nav';
import '@rsuite/document-nav/lib/less/index.less';

function render() {
  return (
    <div className="row">
      <div className="col col-md-4">
        <Nav />
      </div>
      <div className="col col-md-20">
        <Content>{require('redeme.md')}</Content>
      </div>
    </div>
  );
}

手动设置

在 Nav 组件中通过 NavItem 组件设置导航。

import { Content, Nav } from '@rsuite/document-nav';
import '@rsuite/document-nav/lib/less/index.less';

function render() {
  return (
    <div className="row">
      <div className="col col-md-4">
        <Nav>
          <Nav.Item anchor="h-3" title="二级标题---2">
              <Nav.Item anchor="h-3-1" title="三级标题">
            </Nav.Item>
            <Nav.Item anchor="h-4" title="二级标题---3" />
        </Nav>
      </div>
      <div className="col col-md-20">
        <Content>{require('redeme.md')}</Content>
      </div>
    </div>
  );
}

Props

<Nav>

Name Type (Default) Description
fixed boolean (true) 是否固定在屏幕的某一个位置?仅当为 true 时,offset 属性才会生效,为 false 时,导航菜单跟随文档流
offset object ({left: 'auto', top: 60}) 定位,属性为 top, right, bottom, left
width number (250) 导航部分的宽。当 fixedtrue 时,默认为 250, 为 false 时默认为 100%
scrollBar string ('right') 导航栏边上的滚动条位置,leftright
minLevel number (2) 最小导航级别,默认为 2h2
maxLevel number (4) 最大导航级别,默认为 4h4
showOrderNumber boolean (true) 是否显示标题前的序号
once boolean (true) 只解析一次文档?设为true则只会解析一次,文档发生变化时不会重新解析,性能较好。
rtl boolean (false) 文档从右侧开始阅读
deep number (10) 解析的 DOM 深度,避免和标题无关的 DOM 层级过深导致的性能损耗

<Nav.Item>

Name Type (Default) Description
anchor string 对应的锚点 id
title string 显示的标题
children node 可选,子导航菜单

License

MIT licensed

You can’t perform that action at this time.