Zoomable Frame
<quiet-zoomable-frame>
Renders iframe content with zoom and interaction controls.
<quiet-zoomable-frame src="https://quietui.org/" zoom="0.5"> </quiet-zoomable-frame>
Examples Jump to heading
Providing content Jump to heading
Use the src attribute to load content from a URL. This is useful for embedding external
websites or resources. Ensure the URL is accessible and, if cross-origin, be aware that access to the
iframe’s document or window may be restricted due to the Same-Origin Policy.
<quiet-zoomable-frame src="https://example.com/"> </quiet-zoomable-frame>
By default, the zoomable frame spans 100% of the width and uses a 16/9 aspect ratio. You can adjust this
using the aspect-ratio CSS property.
<quiet-zoomable-frame src="https://example.com/" style="aspect-ratio: 4/3;"> </quiet-zoomable-frame>
Use the srcdoc attribute or property to render inline HTML content directly within the iframe.
This is ideal for displaying custom HTML without needing an external resource.
<quiet-zoomable-frame srcdoc="<html><body><h1>Hello, World!</h1><p>This is inline content.</p></body></html>"> </quiet-zoomable-frame>
If both src and srcdoc are provided, srcdoc takes precedence.
Zooming Jump to heading
Set the zoom attribute to change the frame's zoom level. A value of 1 means 100%,
a value of 2 means 200%, etc.
Use the zoom-levels attribute to define specific zoom steps that users can navigate through
with the zoom controls. You can specify levels as a space-delimited set of percentages and decimal values,
e.g. zoom-levels="0.25 0.5 75% 100%".
<quiet-zoomable-frame src="https://quietui.org/" zoom="0.5" zoom-levels="50% 0.75 100%" > </quiet-zoomable-frame>
Removing zoom controls Jump to heading
Add the without-controls attribute to remove the zoom controls from the frame.
<quiet-zoomable-frame src="https://quietui.org/" without-controls zoom="0.5" > </quiet-zoomable-frame>
Disabling interactions Jump to heading
To make the frame inert, add the without-interaction attribute. Users won't be able to tab into
the frame when this is applied, potentially affecting accessibility.
<quiet-zoomable-frame src="https://quietui.org/" zoom="0.5" without-interaction > </quiet-zoomable-frame>
Browser frame example Jump to heading
Zoomable frames work really well with browser frames.
<quiet-browser-frame label="Quiet UI" style="--body-padding: 0;"> <quiet-zoomable-frame src="https://quietui.org/" zoom="0.5"> </quiet-zoomable-frame> </quiet-browser-frame>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-zoomable-frame> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/components/zoomable-frame/zoomable-frame.js';
To manually import <quiet-zoomable-frame> from npm, use the following code.
import '@quietui/quiet/components/zoomable-frame/zoomable-frame.js';
Slots Jump to heading
Zoomable Frame supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
zoom-in-icon
|
The slot that contains the zoom in icon. |
zoom-out-icon
|
The slot that contains the zoom out icon. |
Properties Jump to heading
Zoomable Frame has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
src
|
The URL of the content to display. |
|
string
|
|
srcdoc
|
Inline HTML to display. |
|
string
|
|
allowfullscreen
|
Allows fullscreen mode. |
|
boolean
|
false
|
loading
|
Controls iframe loading behavior. |
|
'eager'
|
'eager'
|
referrerpolicy
|
Controls referrer information. |
|
string
|
|
sandbox
|
Security restrictions for the iframe. |
|
string
|
|
zoom
|
The current zoom of the frame, e.g. 0 = 0% and 1 = 100%. |
|
number
|
1
|
zoomLevels
zoom-levels
|
The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom. |
|
string
|
'25% 50% 75% 100% 125% 150% 175% 200%'
|
withoutControls
without-controls
|
Removes the zoom controls. |
|
boolean
|
false
|
withoutInteraction
without-interaction
|
Disables interaction when present. |
|
boolean
|
false
|
contentWindow
|
Returns the internal iframe's window object. (Readonly property)
|
|
Window
|
|
contentDocument
|
Returns the internal iframe's document object. (Readonly property)
|
|
Document
|
Methods Jump to heading
Zoomable Frame supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods
| Name | Description | Arguments |
|---|---|---|
zoomIn() |
Zooms in to the next available zoom level. | |
zoomOut() |
Zooms out to the previous available zoom level. |
Events Jump to heading
Zoomable Frame dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events
| Name | Description |
|---|---|
load |
Emitted when the internal iframe when it finishes loading. |
error |
Emitted from the internal iframe when it fails to load. |
CSS custom properties Jump to heading
Zoomable Frame supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--aspect-ratio |
The aspect ratio of the frame. |
16/9
|
CSS parts Jump to heading
Zoomable Frame exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
iframe |
The internal <iframe> element. |
::part(iframe)
|
controls |
The container that surrounds zoom control buttons. |
::part(controls)
|
zoom-in-button |
The zoom in button. |
::part(zoom-in-button)
|
zoom-out-button |
The zoom out button. |
::part(zoom-out-button)
|
Custom States Jump to heading
Zoomable Frame has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
loading |
Applied when the iframe is loading. |
:state(loading)
|
error |
Applied when the iframe failed to load. |
:state(error)
|
Dependencies Jump to heading
Zoomable Frame automatically imports the following elements. Sub-dependencies are also included in this list.