Shows all temporal elements in the target composition as a collapsible, selectable tree. Fires hierarchy-select when an element is clicked and hierarchy-reorder when elements are dragged to a new position.
html
<ef-hierarchy target="root" show-header header="Layers"
style="display: block; width: 240px;"></ef-hierarchy>Each row is rendered by an internal ef-hierarchy-item:
css
ef-hierarchy-item::part(row):hover { background: rgba(255, 255, 255, 0.05); }
ef-hierarchy-item::part(label) { font-size: 0.75rem; }Attributes
3 of 3
header
- React prop
header- Type
string- Default
""- Description
- Header text shown above the tree (when
show-header).
show-header
- React prop
showHeader- Type
boolean- Default
false- Description
- Whether to show the header row.
target
- React prop
target- Type
string- Default
""- Description
- ID of the target element this component controls or reads from.
CSS Parts
| Part | Description |
|---|---|
header | The optional header above the tree items. This part appears when the show-header attribute is set. |
list | The outer container that holds the hierarchy tree. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--hierarchy-bg | var(--ef-color-bg) | Background color of the tree container. |
--hierarchy-border | var(--ef-color-border) | Border color (header divider). |
--hierarchy-drop-indicator | var(--ef-color-primary) | Color of the drag-and-drop reorder indicator line. |
--hierarchy-hover-bg | var(--ef-color-border-subtle) | Row background color on hover. |
--hierarchy-selected-bg | var(--ef-color-primary-subtle, rgba(110,168,254,0.18)) | Row background color when selected. |
--hierarchy-text | var(--ef-color-text) | Text color. |
Events
| Event | Detail | Description |
|---|---|---|
hierarchy-highlight | { element: Element | null } | Fires when the highlighted element changes, for example when the user hovers over it in ef-canvas. This event fires through EFHierarchyElement#setHighlighted. |
hierarchy-reorder | { sourceId: string; targetId: string; position: "before" | "after" | "inside" } | Fires when the user drags a row to a new position. |
hierarchy-select | { elementId: string | null } | Fires when the user clicks an element row, or when a script calls EFHierarchyElement#select directly. |
Methods
4 of 4
| Method | Description |
|---|---|
select(elementId: string | null): void | Select an element by its ID. Pass null instead to clear the selection. |
getSelectedElementId(): string | null | Returns the ID of the first selected element. Returns null if nothing is selected. |
getHighlightedElement(): Element | null | Returns the element currently highlighted through setHighlighted. Returns null if no element is highlighted. |
setHighlighted(el: Element | null): void | Sets the element that is highlighted from outside this element. For
example, code can call this when the user hovers over the element in
ef-canvas. This method also dispatches the hierarchy-highlight
event. |