Slide: Aspect Ratio

The "Aspect Ratio" slide is a template which preserves the content ratio regardless of the devices.

We use this slide in the DeckDeckGo editor to let users create slides containing shapes, for example to create schema.

Table of contents

Layout

Any elements

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-aspect-ratio@latest/dist/deckdeckgo-slide-aspect-ratio/deckdeckgo-slide-aspect-ratio.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-aspect-ratio@latest/dist/deckdeckgo-slide-aspect-ratio/deckdeckgo-slide-aspect-ratio.js"></script>

From NPM

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

npm install @deckdeckgo/slide-aspect-ratio

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-aspect-ratio';

Loader

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

Usage

The "Aspect Ratio" slide's Web Component could be integrated using the tag <deckgo-slide-aspect-ratio/>.

<deckgo-deck> <deckgo-slide-aspect-ratio> <h1 style="position: absolute; top: 50%; left: 25%">An element</h1> <p style="position: absolute; top: 4%; left: 5%"> Another element </p> </deckgo-slide-aspect-ratio> </deckgo-deck>

Slots

The slots title, header and footer are both optional. header and footer would be displayed over the content.

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.

<deckgo-deck> <deckgo-slide-aspect-ratio> <h1>An element</h1> <div slot="notes">A note regarding this particular slide</div> And another note on a new line about it too. </deckgo-slide-aspect-ratio> </deckgo-deck>

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.

<deckgo-deck> <deckgo-slide-aspect-ratio> <h1>An element</h1> <div slot="notes" show>A note displayed in the presentation within a modal accessible for anyone</div> </deckgo-slide-aspect-ratio> </deckgo-deck>

Attributes

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

AttributeTypeDefaultDescription
rationumber16 / 9The aspect ratio of the displayed content. Per default 16 being the width and 9 the height
gridbooleanfalseDisplay a grid behind the content. Note that the grid would only be display if not fullscreen
editablebooleanfalsePer default point-events are set to none for this template making it read-only respectively not editable
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

<deckgo-deck embedded={true}> <deckgo-slide-aspect-ratio grid={true}> <h1 style={{position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', margin: '0'}}>Any elements</h1> </deckgo-slide-aspect-ratio> </deckgo-deck>

Theming

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

CSS4 variableDefaultNote
--slide-grid-backgroundlinear-gradient(to bottom, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%), linear-gradient(to right, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%)The default grid color
--slide-grid-background-size2em 2emThe default size of each squares of the grid
--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
--zIndex1The z-index of the slide