StellarUI

<stellar-zoomable-frame>

Zoomable iframe surface with optional controls and interaction blocking, following the component's embed contract.

Properties

Preview

Markup

Copy

<stellar-zoomable-frame
  src="https://data-star.dev"
  zoom="0.5"
  allowfullscreen
  style="--aspect-ratio: 4 / 3;"
>
  <stellar-icon slot="zoom-out-icon" name="mdi:magnify-minus-outline"></stellar-icon>
  <stellar-icon slot="zoom-in-icon" name="mdi:magnify-plus-outline"></stellar-icon>
  <stellar-icon slot="fullscreen-icon" name="mdi:fullscreen"></stellar-icon>
</stellar-zoomable-frame>

API

Complete props, events, slots, and implementation notes for the shipped zoomable frame.

Props

Prop	Type	Default
`src`	`string`	`''`
`srcdoc`	`string`	`''`
`allowfullscreen`	`boolean`	`false`
`loading`	`eager \| lazy`	`eager`
`referrerpolicy`	`string`	`''`
`sandbox`	`string`	`''`
`zoom`	`number`	`1`
`zoom-levels`	`string`	`25% 50% 75% 100% 125% 150% 175% 200%`
`without-controls`	`boolean`	`false`
`without-interaction`	`boolean`	`false`

Events

Event	Source	Notes
`load`	internal `<iframe>`	Emitted when the iframe finishes loading.
`error`	internal `<iframe>`	Emitted when the iframe fails to load.

Slots

Slot	Notes
`fullscreen-icon`	Optional replacement for the fullscreen control icon. Only rendered when `allowfullscreen` is enabled.
`zoom-in-icon`	Optional replacement for the default zoom-in icon.
`zoom-out-icon`	Optional replacement for the default zoom-out icon.

Notes

The public tag is `stellar-zoomable-frame`, a display surface that embeds external or inline iframe content and applies a zoom transform around it.
`srcdoc` takes precedence over `src`, matching the component's contract.
`zoom-levels` defines the step list used by the zoom buttons, but programmatic `zoom` changes are still allowed.
`without-controls` removes the zoom controls, and `without-interaction` makes the iframe inert for pointer and keyboard interaction.
Use the readonly host properties `contentWindow` and `contentDocument` only when same-origin policy allows access.