From fb8d85b0707a09541c0f0e75be11173bdef5f94f Mon Sep 17 00:00:00 2001 From: Reiss Cashmore Date: Mon, 30 Oct 2023 17:20:39 +0000 Subject: [PATCH] Update docs --- docs/widgets/services/iframe.md | 123 +++++++++----------------------- 1 file changed, 32 insertions(+), 91 deletions(-) diff --git a/docs/widgets/services/iframe.md b/docs/widgets/services/iframe.md index 4c1c8839..297a7f6e 100644 --- a/docs/widgets/services/iframe.md +++ b/docs/widgets/services/iframe.md @@ -3,99 +3,40 @@ title: iFrame Description: 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](https://tailwindcss.com/docs/height)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#loading)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scrolling)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#frameborder)
-**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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy)
-**Example:** "autoplay fullscreen gamepad" +## Basic Example ```yaml 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 + name: myIframe # string - required - Also helps if you would like to target the iframe with a button + src: "http://example.com" # string - required - URL of the content to load within the iFrame ``` + +## Full Example + +```yaml +widget: + type: iframe + name: myIframe # string - required - Also helps if you would like to target the iframe with a button + src: "http://example.com" # string - required - URL of the content to load within the iFrame + sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" } # optional - 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 + referrerPolicy: "same-origin" # string - optional - no default + allowPolicy: "autoplay fullscreen gamepad" # string - optional - no default - Control the permissions for the iFrame content + allowFullscreen: false # boolean - optional - default: true - Controls whether you can interact with a fullscreen button from within the iframe content and have the content expand into fullscreen + loadingStrategy: "eager" # string - optional - default: "eager" - Make the iframe lazy load + allowScrolling: "no" # string - optional - default: "yes" - Will disable scrolling and visible scrollbars. Deprecated, but still implemented by major browsers (for now) + border: 0 # number - optional - default: 1 - Will remove the small border present on some browsers. Deprecated, but still implemented by major browsers (for now) + refreshInterval: 2000 # number - optional - no default - This will refresh the iframe on an interval +``` + +### Available Sizes +[Tailwind Docs](https://tailwindcss.com/docs/height) + +### References +[referrerPolicy MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) +[allowFullscreen MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen) +[loading MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#loading) +[scrolling MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scrolling) +[border MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#frameborder) +[allowPolicy MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy) +