ComboStrap UI - Page Explorer

About

A page-explorer is a navigational component that creates a navigation pane 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 or sidekick slot

Example

Default List

A default page-explorer list pane can be asked with this minimal markup (the ns (namespace) and width options are just cosmetic and could be deleted)

<page-explorer ns=":release" width="300px"></page-explorer>

and will look like this:

Default Tree

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

  • with a minimal markup (The ns option is a cosmetic and can be deleted)
<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"/> ... <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</parent>
    <page>[[$path|<icon name="file"/> <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</page>
</page-explorer>

where the page template is composed of:

Custom Collapsible Tree

Example:

<page-explorer tree ns=":docs:layout">
    <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:

Syntax

<page-explorer type ns="namespacePath">
  <page>template</page>
  <namespace>template</namespace>
  <home>template</home>
  <parent>template</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-elements page,namespace, home and parent define templates for each page-explorer node.

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

Templates

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

  • 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)

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.

_

If a sub-element (home, parent, namespace) is defined without any template (ie empty content), they are not shown.

Default template

  • if the page tag is is not defined, the below default page template is used
[[$path|<pipeline>"$name" | replace("_"," ") | capitalize()</pipeline>]]
  • if the namespace tag is not defined, a default namespace template is used
<!-- For a list -->
[[$path|<icon name="folder"/> <pipeline>"$name" | replace("_"," ") | capitalize()</pipeline>]]
<!-- For a tree -->
<pipeline>"$name" | replace("_"," ") | capitalize()</pipeline>
  • if the parent tag is not defined, a default parent template is used
[[$path|<icon name="arrow-left-box"/> ... <pipeline>"$name" | replace("_"," ") | capitalize()</pipeline>]]
  • 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 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