DevCanvas
components/dev/Canvas.vue
Interactive documentation wrapper with adminProps-driven prop editor, titled backdrop, and source file location.
Default
Hello World
components/ux/Button.vue
Admin At Top
Controls appear above this content
Custom Background
White text on dark backdrop
components/dev/Canvas.vue
Usage
<DevCanvas
title = "—"
loc = "—"
route = "—"
:adminProps = "adminProps"
:adminAtTop = "false"
bg = "—"
>
Content here
</DevCanvas>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | '' | Section heading (becomes anchor ID) |
| loc | String | '' | Source file path (click to copy) |
| route | String | '' | App route shown in header |
| adminProps | Object | null | Reactive ref for prop editor |
| adminAtTop | Boolean | false | Position editor above demo |
| bg | String | '' | Backdrop CSS class override |
Events
| Event | Description |
|---|---|
| update:adminProps | When props are edited |
Slots
| Slot | Description |
|---|---|
| default | The component demo |