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:
Where $VERSION
is the latest version on npm.
In your template add a <bit-toc>
element:
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:
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:
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:
scroll-selector
If present, will scroll the <bit-toc>
element with the heading-container-selector
:
scroll-selector
can also be set to some other element to scroll:
Methods
Call .highlight()
to force an update of the active
or completed
class names on the <li>
elements:
document
This happens automatically when the heading-container-selector
element is scrolled.