{div:class=component-api-page}
{anchor:top}
The Levels subcomponent is used by [Table of Contents] to render the generated list of links to headers into a template.

*Do not use this component directly.* The information on this page should be use when customizing Table of Contents.

*See Also*
[Table of Contents]
[UI Enhancer]

{div2:class=summary-table}
||Supported Events |_none_|
||Methods| _none_ |
||[#Options] | {{[#model]}}\\
...\\
\\
{{[#produceTree]}}\\
...\\
\\
{{[#rendererFnOptions]}}\\
...\\
\\
{{[#rendererOptions]}}\\
...\\
\\
{{[#repeatingSelectors]}}\\
...\\
\\
{{[#resources]}}\\
...\\
\\
*{{selectors}}*\\
See below.\\
\\
|
||[#Selectors]| {{[#level1 through level6]}}\\
Identify the elements in the template for the levels.\\
\\
{{[#items1 through items6]}}\\
Identify the elements in the template for the items at each level.\\
\\
{{[#link1 through link6]}}\\
Identify the elements in the template for the links to the headings.|
{div2}


h2. Options
{span:class=back-to-top}[back to top|#top]{span}
{include:_options intro}

h3. model

{div2:class=api-table}
||Description|An object containing an array of information about the headings in the document. It should have the following form:\\
{code:javascript}{
    heading: [{
        text: <heading text>,
        url: <link to ??>
        headings: [<array of heading info for subheadings>]
    },
    ...
]
}{code}\\
By default, this information is generated by the component as part of its initialization process.|
||Default| {code:javascript}{
    heading: []
}{code}|
{div2}

h3. produceTree

{div2:class=api-table}
||Description|...|
||Default| {{"fluid.tableOfContents.levels.produceTree"}} |
||Example| {code:javascript}produceTree: "customTreeProducerFn"{code} |
||See also| |
{div2}

h3. rendererFnOptions

{div2:class=api-table}
||Description|...|
||Default| {code:javascript}{
    noexpand: true
}{code} |
||Example| {code:javascript}rendererFnOptions: {
    noexpand: true
}{code} |
||See also| |
{div2}

h3. rendererOptions

{div2:class=api-table}
||Description|...|
||Default| {code:javascript}{
    debugMode: false
}{code} |
||Example| {code:javascript}rendererOptions: {
    debugMode: true
}{code} |
||See also| |
{div2}

h3. repeatingSelectors

{div2:class=api-table}
||Description|...|
||Default| {code:javascript}["level1", "level2", "level3", "level4", "level5", "level6",
 "items1", "items2", "items3", "items4", "items5", "items6"]{code} |
||Example| {code:javascript}repeatingSelectors: [???]{code} |
||See also| |
{div2}

h3. resources
{div2:class=api-table}
||Description|...|
||Default| {code:javascript}{
    template: {
        forceCache: true,
        url: "../html/TableOfContents.html"
    }
}{code} |
||Example| {code:javascript}resources: {
    template: {
        url: "../templates/CustomToCTemplate.html"
    }
}{code} |
||See also| |
{div2}

h2. Selectors
{span:class=back-to-top}[back to top|#top]{span}
{include:_selectors intro}

h3. level1 through level6

{div2:class=api-table}
||Description|These selectors identify the elements in the template that serve as containers for the different levels of header links. In the default template, these selectors identify {{<ul>}} elements.  |
||Default| {{".flc-toc-levels-level1"}} through {{".flc-toc-levels-level6"}}|
||Example| {code:javascript}selectors: {
    level1: "ol.level1",
    level2: "ol.level2",
    level3: "ol.level3",
    ...
}{code} |
{div2}

h3. items1 through items6

{div2:class=api-table}
||Description|These selectors identify the elements in the template that serve as containers for the links at each level. In the default template, these selectors identify {{<li>}} elements.  |
||Default| {{".flc-toc-levels-items1"}} through {{".flc-toc-levels-items6"}}|
||Example| {code:javascript}selectors: {
    items1: ".level1 div",
    items2: ".level2 div",
    items3: ".level3 div",
    ...
}{code} |
{div2}

h3. link1 through link6

{div2:class=api-table}
||Description|These selectors identify the link elements at each level. In the default template, these selectors identify {{<a>}} elements.  |
||Default| {{".flc-toc-levels-link1"}} through {{".flc-toc-levels-link6"}}|
||Example| {code:javascript}selectors: {
    link1: "..."
}{code} |
{div2}


{div}