The "Content" slide is a simple slide which display its title and content aligned to the start of the page.
This slide could be for example use for the every slides of your presentation where you would like to display content related to your talk.
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.
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-content@latest/dist/deckdeckgo-slide-content/deckdeckgo-slide-content.esm.js"></script>To install this template in your project from npm run the following command:
npm install @deckdeckgo/slide-contentThe 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/slide-content';import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-content/dist/loader';
deckDeckGoSlideElement();The "Content" slide's Web Component could be integrated using the tag
<deckgo-slide-content/>.
<deckgo-deck>
<deckgo-slide-content>
<h1 slot="title">Something related to my topic</h1>
<p slot="content">
Cool beans
</p>
</deckgo-slide-content>
</deckgo-deck>Both slots
title and content are optional. Without providing one of them, the page will remain empty.
This component offers the following options which could be set using attributes:
| Attribute | Type | Default | Description |
|---|---|---|---|
| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to
true |
| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to
true |
<deckgo-deck>
<deckgo-slide-content>
<h1 slot="title">Something related to my topic</h1>
<ul slot="content">
<li>Cool</li>
<li>Beans</li>
</ul>
</deckgo-slide-content>
</deckgo-deck>The following theming options will affect this component if set on its host or parent.
| CSS4 variable | Default | Note |
|---|---|---|
| --background | ||
| --color | ||
| --slide-padding-top | 16px | Padding top of the all slide |
| --slide-padding-end | 32px | Padding right of the all slide |
| --slide-padding-bottom | 16px | Padding bottom of the all slide |
| --slide-padding-start | 32px | Padding left of the all slide |
| --slide-content-justify-content | flex-start | Justify the content of the slide |
| --zIndex | 1 | The z-index of the slide |