Slide: Split

The "Split" slide is a simple slide which display two panes on the page.

Table of contents

Layout

This template could split the content in two different ways.

Horizontal

The content you want to display on the left side of the page

The content you want to display on the right side of the page

0%0/0

Vertical

The content you want to display on the top of the page

The content you want to display on the bottom of the page

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

From NPM

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

npm install @deckdeckgo/slide-split

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-split';

Loader

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

Usage

The "Split" slide's Web Component could be integrated using the tag <deckgo-slide-split/>.

<deckgo-deck> <deckgo-slide-split> <h1 slot="title">Two columns subject</h1> <p slot="start"> The content you want to display on the left side of the page </p> <p slot="end"> The content you want to display on the right side of the page </p> </deckgo-slide-split> </deckgo-deck>

Slots

Both slots title, start and end are optional. Without providing one of them, the page will remain empty.

The start slot is the content of the left pane respectively the slot end is the content of the right pane.

Note: The slot title is per default hidden even if you provide it. See attributes below if you wish to display it.

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.

Attributes

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

AttributeTypeDefaultDescription
verticalbooleanfalsePer default this template is horizontally split (two columns). Turn this property to true too display two rows respectively split vertically
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

Theming

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

CSS4 variableDefaultNote
--background
--color
--slide-split-background-startLeft split pane background
--slide-split-color-startLeft split pane color
--slide-split-background-endRight split pane background
--slide-split-color-endRight split pane color
--slide-split-padding-top0Padding top of a slide split pane
--slide-split-padding-end64pxPadding right of a slide split pane
--slide-split-padding-bottom0Padding bottom of a slide split pane
--slide-split-padding-start64pxPadding left of a slide split pane
--slide-split-title-padding-top16pxPadding top of the title of the
--slide-split-title-padding-end32pxPadding right of the title of the
--slide-split-title-padding-bottom16pxPadding bottom of the title of the
--slide-split-title-padding-start32pxPadding left of the title of the
--slide-padding-start32pxModify slotted ul and ol padding-inline-start
--slide-split-aligninheritModify for example to center if you want to align the content in the middle
--slide-split-text-aligninheritModify for example to center if you want to align the text in the middle
--slide-split-title-displaynoneThe slot title is per default hidden even if you provide it. If you wish to displays it, modify this attribute
--zIndex1The z-index of the slide
--slide-split-display-startflexStart side display property
--slide-split-display-endflexEnd side display property