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>

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

once 设置为文档只解析一次，用于文章结构不会改变的情况，避免比较解析造成的性能损耗。如果文档结构会动态改变，请务必设为 false

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) | 导航部分的宽。当 fixed 为 true 时，默认为 250， 为 false 时默认为 100% | | scrollBar | string ('right') | 导航栏边上的滚动条位置，left 或 right | | minLevel | number (2) | 最小导航级别，默认为 2 即 h2 | | maxLevel | number (4) | 最大导航级别，默认为 4 即 h4 | | showOrderNumber | boolean (true) | 是否显示标题前的序号 | | once | boolean (true) | 只解析一次文档？设为true则只会解析一次，文档发生变化时不会重新解析，性能较好。 | | rtl | boolean (false) | 文档从右侧开始阅读 | | deep | number (10) | 解析的 DOM 深度，避免和标题无关的 DOM 层级过深导致的性能损耗 | | basePath | string('') | 通过传入 basePath，来支持使用了 base 标签 的场景 |

<Nav.Item>

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

License

MIT licensed