Demo

Display your apps or websites inside an Android or iOS frame.

It is largely inspired and based on the awesome work of the Ionic team.

Table of contents

Showcase

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/demo@latest/dist/deckdeckgo-demo/deckdeckgo-demo.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/demo@latest/dist/deckdeckgo-demo/deckdeckgo-demo.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/demo

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/demo';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/demo/dist/loader'; deckDeckGoElement();

Usage

The "Demo" Web Component could be integrated using the tag <deckgo-demo/>.

<deckgo-demo src="https://deckdeckgo.app"></deckgo-demo>

Slots

No slots are available for this component.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
srcstringThe source Url of your application or website. This will be used as src attribute of the encapsulated iframe.
frame-titlestringA title for the frame, could be use for accessibility reason.
mode'md' or 'ios''md'The type of device frame. md for Android, ios for iPhone.
instantbooleanfalseIn case you would like to load the frame as soon as the component is loaded.

Per default the iframe is not be loaded (expect if you specify instant to true). Therefore it's up to you to call the method lazyLoadContent to create it. The reason behind this decision is allowing you to lazy load your content.

Methods

The <deckgo-demo/> component exposes the following methods:

Lazy load the iframe

lazyLoadContent(): Promise<void>

Refresh iframe size and reload content

updateIFrame(): Promise<void>

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--deckgo-demo-placeholder-background#323639A background color for the content of the device until the frame is loaded.

Sizing

On load and on window resize, the component will take care of resizing itself. It will compute the width and height of the host element to apply these to its content, to the shadowed iframe.