14325280d9
- 78 SDK pages per language (components, composables, advanced API, guides, architecture, getting-started) - vector-edit.md user guide page (5 languages) - Update stale ru/programmable/cli/inspecting.md - Fix YAML frontmatter quoting for colons in descriptions 474 files, 0 missing pages across de/es/fr/it/pl/ru. VitePress build verified — all 546 SDK pages render.
1.5 KiB
1.5 KiB
| title | description |
|---|---|
| Pannelli di Navigazione | Crea sidebar per pagine e layer con PageListRoot, LayerTreeRoot e lo stato della selezione. |
Pannelli di Navigazione
Le sidebar di OpenPencil di solito combinano due aspetti:
- navigazione tra pagine
- navigazione tra layer
Il Vue SDK fornisce primitive headless per entrambi.
Navigazione tra pagine
Usa PageListRoot o usePageList().
<PageListRoot v-slot="{ pages, currentPageId, switchPage, addPage }">
<div>
<button v-for="page in pages" :key="page.id" @click="switchPage(page.id)">
{{ page.name }}
</button>
<button @click="addPage()">Nuova pagina</button>
</div>
</PageListRoot>
Navigazione tra layer
Usa LayerTreeRoot quando vuoi struttura ad albero gestita dall'SDK ma presentazione di proprietà dell'app.
<LayerTreeRoot v-slot="{ items, selectedIds, select, toggleExpand, getKey, getChildren }">
<TreeView
:items="items"
:selected-ids="selectedIds"
:get-key="getKey"
:get-children="getChildren"
@select="select"
@toggle-expand="toggleExpand"
/>
</LayerTreeRoot>
Pattern pratico
Un layout comune è:
- le pagine in cima alla sidebar
- i layer sotto
- controlli per dettagli o rinomina inline incorporati nei componenti di riga