ComboStrap UI - Page Explorer

About

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

  • a list
  • or clickable levels of folder hierarchy

This component is mostly used in a side slot or sidekick slot

Syntax

<page-explorer type ns="namespacePath">
  <page>$path - $title</page>
  <namespace>$path - $title</namespace>
  <home>$path - $title</home>
  <parent>$path - $title</parent>
</page-explorer>

where:

  • the attributes are:
    • type that defines the layout and may be one of this two value:
      • list to create a list navigation pane (the default)
      • tree to create a tree navigation pane
    • ns that defines the namespace. The default value is the namespace of:
      • the rendered page for a list
      • the physical page for a tree.
  • the sub-element are:
    • page defines a template for each page in the namespace
    • home defines a template for the home page of the namespace
    • namespace defines a template for each child namespace of the actual namespace
    • parent defines a template for the parent namespace of the actual namespace (used only in the list layout)

page-explorer, home, page, parent and namespace are all superset HTML component.

Example

List

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

<page-explorer color="blue" height="250px" width="400" scroll="toggle">
    <home>[[$path?underline=false|$title]]</home>
    <page>
        [[$path?underline=false|<icon name="file"/> <pipeline>"$h1" | replace("ComboStrap UI - ","")</pipeline>]]
    </page>
</page-explorer>

where the page template is composed of:

Collapsible Tree

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

Example:

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

where the page template is composed of:

It produces:

Support

Performance consideration with the tree pane

The page-explorer tree is recreated every time that a subpage is modified. If your tree has a lot of page, it may perform poorly:

  • while editing
  • and for the first viewer
Powered by ComboStrap