ComboStrap UI - Page Explorer
Table of Contents
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 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 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:
- an icon
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:
- 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|$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