bit-docs-html-toc


A table of contents for use with bit-docs-generate-html.

!screen shot 2016-11-10 at 10 16 55

!screen shot 2016-11-10 at 10 15 51

!screen shot 2016-11-09 at 17 02 17

Use

To use, add bit-docs-html-toc to your bit-docs dependencies in package.json:

``json
{
...

"bit-docs": {
"dependencies": {
"bit-docs-html-toc": "$VERSION"
}
}
}
`

Where $VERSION is the latest version on npm.

In your template add a element:

`html

`

Attributes

supports the following attributes:

$3

By default, all heading tags children of the first article tag on the page will
be collected to create the table of contents; if you want to use a different element
just do:

`html
heading-container-selector="#my-custom-selector"
>

`

The table of contents will be injected into this element at run time.

$3

By default, only h2 elements are collected. You
can change to include

elements by setting depth like:

`html

`

Alternatively, the number of child headers that will be included in the TOC, use the
@outline tag like so:

`
@outline 2
`

$3

If you want

's to be within an

instead of a
, this
can be configured like:

`html

`

$3

If present, will scroll the element with the heading-container-selector:

`html

`

scroll-selector can also be set to some other element to scroll:

`html

`

Methods

Call .highlight() to force an update of the active or completed
class names on the

• elements:

  `js
document.querySelector("bit-toc").highlight()
`

  This happens automatically when the heading-container-selector`
  element is scrolled.