Slide: QR Code

The "QR code" slide is an handy slide in case you would like to display a QR code. It could for example be use as the very last slide of your presentation to display an easy link pointing to your deck, you previously published online. It would allow your audience to get easily your slides without any delay on their phone.

Table of contents

Layout

slot="title"

slot="content"

0%0/0

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template 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/slide-qrcode@latest/dist/deckdeckgo-slide-qrcode/deckdeckgo-slide-qrcode.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-qrcode@latest/dist/deckdeckgo-slide-qrcode/deckdeckgo-slide-qrcode.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-qrcode

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/slide-qrcode';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-qrcode/dist/loader'; deckDeckGoSlideElement();

Usage

The "QR code" slide's Web Component could be integrated using the tag <deckgo-slide-qrcode/>.

Usage

<deckgo-deck> <deckgo-slide-qrcode content="https://deckdeckgo.com"> <h1 slot="title">My QR code</h1> <p slot="content">An optional additional content</p> </deckgo-slide-code> </deckgo-deck>

Slots

The slots title and content are optional.

Notes

Optionally a slot notes could be use to add some notes regarding the particular slide. These will be automatically displayed in the remote control.

If you are using the DeckDeckGo starter kit and wish to make your notes accessible to anyone, you will need to mark them with the attribute show.

Code components

The slide "QR Code" relies on the code component <deckgo-qrcode/> which is described in the components documentation.

Installation

The DeckDeckGo - QR Code component is provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo QR code to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.

Attributes

The attribute content should be provided in order to render a QR code in this template. It offers the same attributes as the DeckDeckGo QR code Web Component, see its documentation for the details, and the following other attributes:

AttributeTypeDefaultDescription
img-srcstringIn case you would like to display a logo over the QR code, provide the source of the image. Note: this image is lazy loaded too.
img-altstringIn case you would display a logo over the QR code, you could provide an accessibility attribute using this option.
custom-backgroundbooleanfalseIf you would provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you would provide actions for the all deck and a specific one for this slide, set this option to true

Example without any slots

<deckgo-deck> <deckgo-slide-qrcode content="An encoded text"> </deckgo-slide-code> </deckgo-deck>

Theming

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

CSS4 variableDefaultNote
--background
--color
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--slide-qrcode-aligncenterQR code vertical alignment
--slide-qrcode-text-aligncenterQR code horizontal alignment
--slide-qrcode-backgroundQR code column's background
--slide-qrcode-title-displayblockIf you wish to hide the slot="title"

Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo - QR code Web Component, see its documentation for the details.