homepage/docs/widgets/services/iframe.md
2023-10-30 07:59:58 -07:00

3.7 KiB

title Description
iFrame Add a custom iFrame Widget

name

Type: string
Default: null
Required: Yes
Description: Important to allow the iframe to be unique on the page and helps if you would like to target the iframe with a button
Example: "myIframe"

src

Type: string (URL)
Default: null
Required: Yes
Description: URL of the content to load within the iFrame
Example: "http://example.com"

sizes

Type: object
Default: {"xs": '60', "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80"}
Required: No
Description: Controls the height of the iframe (width is always 100%) The value for each breakpoint size must map directly to a field in the Tailwind Height CSS classes - Tailwind Docs
Example: "{"xs": '32', "sm": "12", "md": "44", "lg": "60", "xl": "72", "2xl": "80"}"

referrerpolicy

Type: string ["no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin-when-cross-origin" | "unsafe-url"]
Default: null
Required: No
Description: MSDN Reference
Example: "no-referrer"

allowfullscreen

Type: boolean [true | false]
Default: null
Required: No
Description: Controls whether you can interact with a fullscreen button from within the iframe content and have the content expand into fullscreen - MSDN Reference
Example: false

loading

Type: string ["eager" | "lazy"]
Default: null
Required: No
Description: Changes the loading style of the iframe, delaying the loading until other assets are finished - MSDN Reference
Example: "lazy"

allowScrolling

Type: string ["yes" | "no"]
Default: null
Required: No
Description: Will disable scrolling and visible scrollbars. Deprecated, but still implemented by major browsers (for now) - MSDN Reference
Example: "no"

border

Type: number
Default: null
Required: No
Description: Will remove the small border present on some browsers. Deprecated, but still implemented by major browsers (for now) - MSDN Reference
Example: 2

refreshInterval

Type: number (in milliseconds)
Default: null
Required: No
Description: This will refresh the iframe on an interval
Example: 2000

allowPolicy

Type: string
Default: null
Required: No
Description: Allows you to control some of the permissions and functionality that is allowed within the iFrame content. You can combine as many directives from the following list into a single string separated by space characters - MSDN Reference
Example: "autoplay fullscreen gamepad"

widget:
  type: iframe
  name: myIframe
  src: "http://example.com"
  sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" }
  referrerPolicy: "same-origin"
  allowPolicy: ""
  allowFullscreen: "false"
  loadingStrategy: "eager"
  allowScrolling: "no"
  allowTransparency: "false"
  allowAutoplay: "false"
  border: 0
  refreshInterval: 2000