ComboStrap UI - Page Explorer

About

A page-explorer is a navigational component that creates a navigation bar in the form of:

• a list
• or a collapsible tree (ie clickable levels of folder hierarchy)

This component is mostly used in a side slot.

Example

Default List

A default page-explorer list pane can be asked with this minimal markup (the width options is cosmetic and can be deleted)

By default, the list will show the pages of the namespace from the requested page.

<page-explorer width="300px"></page-explorer>

and will look like this where the label for each page is the page name

Default Tree

A page-explorer tree does not need any template definition.

• with a minimal markup (The ns option is cosmetic and can be deleted, it permits to show two levels)

<page-explorer tree ns=":docs:layout"></page-explorer>

• a page-explorer tree will look like this:

Custom List

<page-explorer color="blue" height="250px" width="400" scroll="toggle">
    <parent>[[$path|<icon name="arrow-left-box"/> ... ${h1 | cut("-","2-") | trim()} ]]</parent>
    <page>[[$path|<icon name="file"/> ${h1 | cut("-","2-") | trim()} ]]</page>
</page-explorer>

where the page template is composed of:

• an icon
• a link without underline
• and a pipeline to modify the heading 1 of the page.

Custom Collapsible Tree

Example:

<page-explorer tree ns=":docs:layout">
    <index>[[$path|<icon name="home" color="#0000004d" width="20"/> Overview]]</index>
    <ns>${h1 | cut("-","2-") | trim()}</ns>
    <page>[[$path|<icon name="file" color="#0000004d" width="20"/>  ${h1 | cut("-","2-") | trim()}</page>
</page-explorer>

where the page template is composed of:

• an icon
• a link
• and a pipeline to modify the heading 1 of the page.

It produces:

Syntax and Templates

Syntax

<page-explorer type ns="namespacePath">
  <page>template</page>
  <namespace>template</namespace>
  <index>template</index>
  <parent>template</parent>
</page-explorer>

where:

• The sub-elements define templates for:
  • page - a page,
  • namespace - for a namespace,
  • index for a index page
  • parent - for the parent namespace
• The page-explorer attributes are:

Templates

The templates define the output of each node in the list or tree layout:

• page defines a for each page in the namespace
• index defines a fragment for the index page of the namespace
• namespace defines a fragment for each child namespace of the actual namespace
• parent defines a fragment for the index page of the parent namespace of the actual namespace (used only in the list layout)

The below image shows you the mapping between the tag and their location in a list layout.

The below image shows you the mapping between the tag and their location in a tree layout.

Default template

• if the page tag is is not defined, the below default page template is used

[[$path|$name]]

• if the namespace tag is not defined, a default namespace template is used

<!-- For a list -->
[[$path|<icon name="mdi:folder"/> $name]]
<!-- For a tree -->
$name</pipeline>

• if the parent tag is not defined, a default parent template is used

[[$path|<icon name="icons8:level-up"/> $name]]

• if the home tag is is not defined, the page template is used

Support

Performance consideration with the tree pane

The page-explorer tree is recreated when:

• a primary metadata (title, name, description) is modified (primary meta dependency)
• a page is added or deleted (page system dependency)

If your tree has a lot of pages, it may seems slow:

• while editing
• or for the first viewer