Frame

Frame creates an iframe and renders its children into the iframe document through a portal. It also supplies the iframe document through EnvironmentProvider, so nested Destyler components use the correct window and document.

Import

<script setup lang="ts">
import { Frame } from '@destyler-ui/vue'
</script>

import { Frame } from '@destyler-ui/react'

import { Frame } from '@destyler-ui/solid'

<script lang="ts">
  import { Frame } from '@destyler-ui/svelte/frame'
</script>

Basic usage

<script setup lang="ts">
import { Frame } from '@destyler-ui/vue'
</script>

<template>
  <Frame title="Preview" :style="{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }">
    <div style="padding: 2rem">
      <h2>Inside the frame</h2>
      <button type="button">Focusable content</button>
    </div>
  </Frame>
</template>

import { Frame } from '@destyler-ui/react'

export function Example() {
  return (
    <Frame title="Preview" style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}>
      <div style={{ padding: '2rem' }}>
        <h2>Inside the frame</h2>
        <button type="button">Focusable content</button>
      </div>
    </Frame>
  )
}

import { Frame } from '@destyler-ui/solid'

export function Example() {
  return (
    <Frame title="Preview" style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}>
      <div style={{ padding: '2rem' }}>
        <h2>Inside the frame</h2>
        <button type="button">Focusable content</button>
      </div>
    </Frame>
  )
}

<script lang="ts">
  import { Frame } from '@destyler-ui/svelte/frame'
</script>

<Frame title="Preview" style="border: 1px solid #ccc; width: 100%; height: var(--height);">
  <div style="padding: 2rem;">
    <h2>Inside the frame</h2>
    <button type="button">Focusable content</button>
  </div>
</Frame>

The generated iframe exposes its measured content height through the --height custom property.

API

Prop	Type	Default	Description
Default content	Framework content or slot	—	Content rendered into the iframe body.
head	Prop, snippet, or Vue #head slot	—	Content rendered into the iframe head.
title	string	—	Accessible iframe title. Required by the Solid component; forwarded as a standard iframe attribute by React, Vue, and Svelte.
srcDoc / srcdoc	string	Internal empty document	Initial iframe document. Use srcDoc in React, srcDoc (src-doc in templates) in Vue, and srcdoc in Solid and Svelte. Include an element with class="frame-root" to choose the mount point.
Mount lifecycle	Vue mount/unmount events or React/Solid/Svelte callbacks	—	Reports frame content mounting and unmounting.
ref	HTMLIFrameElement	—	Bindable iframe reference.

Other standard iframe attributes, including sandbox and allow, are forwarded to the iframe.