bit-docs-html-toc
v1.1.2
Published
table of contents bit-docs plugin
Downloads
28
Keywords
Readme
bit-docs-html-toc
A table of contents for use with bit-docs-generate-html.
Use
To use, add bit-docs-html-toc to your bit-docs dependencies in package.json:
{
...
"bit-docs": {
"dependencies": {
"bit-docs-html-toc": "$VERSION"
}
}
}
Where $VERSION
is the latest version on npm.
In your template add a <bit-toc>
element:
<bit-toc></bit-toc>
Attributes
<bit-toc>
supports the following attributes:
heading-container-selector
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:
<bit-toc
heading-container-selector="#my-custom-selector"
>
</bit-toc>
The table of contents will be injected into this element at run time.
depth
By default, only h2
elements are collected. You
can change to include <h3>
elements by setting depth like:
<bit-toc depth="2"></bit-toc>
Alternatively, the number of child headers that will be included in the TOC, use the
@outline
tag like so:
@outline 2
child-tag
If you want <li>
's to be within an <ol>
instead of a <ul>
, this
can be configured like:
<bit-toc child-tag="ol"></bit-toc>
scroll-selector
If present, will scroll the <bit-toc>
element with the heading-container-selector
:
<bit-toc scroll-selector></bit-toc>
scroll-selector
can also be set to some other element to scroll:
<bit-toc scroll-selector="#some-parent"></bit-toc>
Methods
Call .highlight()
to force an update of the active
or completed
class names on the <li>
elements:
document.querySelector("bit-toc").highlight()
This happens automatically when the heading-container-selector
element is scrolled.