Examples
Basic
Header, main, and a message-bar footer inside the container.
Header, main, and footer regions inside the compass container.
With docked nav
docked=true + the dock slot add an icon rail outside the container.
The dock rail sits outside the container; pf-m-docked reserves space for it.
Main header structure
Title in __main-header-content with a trailing toolbar.
Title in __main-header-content with a toolbar aligned to the end.
Documentation
Compass props
| Name | Type | Description |
|---|---|---|
id
|
String | DOM id on the root. |
docked
|
Boolean |
pf-m-docked; pair with hasCompassDock.
|
hasCompassDock / hasCompassHeader / hasCompassSidebarStart / hasCompassSidebarEnd /
hasCompassFooter
|
Boolean | Render that region with its compass-prefixed slot. |
dockExpanded / headerExpanded / footerExpanded
|
Boolean |
pf-m-expanded on the region.
|
attrs
|
String (raw) | Raw attribute passthrough on the root. |
main block
|
Qute block |
The __main region content.
|
Usage
Compass is a full-page shell — give it an explicit height when embedding. The examples here are structural; a real app puts navigation in the dock, chat or content in main, and a message bar in the footer.