For the complete documentation index, see llms.txt. This page is also available as Markdown.

Hierarchy ✅

Transforms elements and collection list content into hierarchical form.

Overview

The Hierarchy component transforms a list of items or collection list content into a hierarchy.

  • It's designed for up to 5 levels of hierarchy, each of which;

    • Can be based on a completely different "level" template that you customize

    • Can be always-expanded, collapsable, or collapsed

  • Source content is simple to manage, a collection with a single ref to itself is adequate- each item identifies its parent.

Uses;

  • This is ideal for hierarchical navigations.

Notes;

  • Avoid circular references, like B's parent is A, and A's parent is B. The component will seek to handle that situation but since it presents an undefined data structure, there's no way to handle it "gracefully."

Examples

Component Properties

To be documented. Use the video as reference for now.

Variables

Use these for styling;

cc-hierarchy-1-border-radius cc-hierarchy-1-border-width cc-hierarchy-1-border-color cc-hierarchy-1-bg-color cc-hierarchy-1-color cc-hierarchy-1-font-family cc-hierarchy-1-font-size cc-hierarchy-1-font-weight cc-hierarchy-1-line-height cc-hierarchy-1-padding-left cc-hierarchy-1-padding-top cc-hierarchy-1-padding-right cc-hierarchy-1-padding-bottom cc-hierarchy-1-icon-color cc-hierarchy-1-icon-size cc-hierarchy-gap

Last updated