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.
This component could be added to your web application using the following methods.
If you are using our Starter Kit, no need to worry about this, this component is included, therefore you could skip the "Installation" chapter.
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>Install it in your project from npm using the following command:
npm install @deckdeckgo/demoThe 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 '@deckdeckgo/demo';import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/demo/dist/loader';
deckDeckGoElement();The "Demo" Web Component could be integrated using the tag
<deckgo-demo/>.
<deckgo-demo src="https://deckdeckgo.app"></deckgo-demo>No slots are available for this component.
This component offers the following options which could be set using attributes:
| Attribute | Type | Default | Description |
|---|---|---|---|
| src | string | The source Url of your application or website. This will be used as
src attribute of the encapsulated
iframe. | |
| frame-title | string | A 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. |
| instant | boolean | false | In 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.
The
<deckgo-demo/> component exposes the following methods:
lazyLoadContent(): Promise<void>updateIFrame(): Promise<void>The following theming options will affect this component if set on its host or parent.
| CSS4 variable | Default | Note |
|---|---|---|
| --deckgo-demo-placeholder-background | #323639 | A background color for the content of the device until the frame is loaded. |
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.