doc(#372): document new template split property vertical

CHANGELOG.md

@@ -3,7 +3,7 @@
 
 ### Applications
 
-* docs: v1.0.0-rc.4-2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+* docs: v1.0.0-rc.4-3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
 
 ### Web Components
 * charts: v1.0.0-rc.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))

docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.4-3"></a>
+# 1.0.0-rc.4-3 (2019-10-13)
+
+### Features
+
+* new split `vertical` property
+
 <a name="1.0.0-rc.4-2"></a>
 # 1.0.0-rc.4-2 (2019-10-09)
 

docs/docs/slides/app-slide-split/app-slide-split.md

@@ -5,6 +5,8 @@ The "Split" slide is a simple slide which display two panes on the page.
 ## Table of contents
 
 - [Layout](#app-slide-split-layout)
+  - [Horizontal](#app-slide-split-layout-horizontal)
+  - [Vertical](#app-slide-split-layout-vertical)
 - [Installation](#app-slide-split-installation)
   - [From a CDN](#app-slide-split-from-a-cdn)
   - [From NPM](#app-slide-split-from-npm)
@@ -17,10 +19,13 @@ The "Split" slide is a simple slide which display two panes on the page.
 
 ## Layout
 
+This template could split the content in two different ways.
+
+### Horizontal
+
 <div class="container ion-margin">
   <deckgo-deck embedded={true}>
     <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>
@@ -31,6 +36,22 @@ The "Split" slide is a simple slide which display two panes on the page.
   </deckgo-deck>
 </div>
 
+### Vertical
+
+
+<div class="container ion-margin">
+  <deckgo-deck embedded={true}>
+    <deckgo-slide-split vertical={true}>
+        <p slot="start">
+          The content you want to display on the top of the page
+        </p>
+        <p slot="end">
+          The content you want to display on the bottom of the page
+        </p>
+      </deckgo-slide-split>
+  </deckgo-deck>
+</div>
+
 ## Installation
 
 This template could be added to your presentation using the following methods.
@@ -113,6 +134,7 @@ This component offers the following options which could be set using attributes:
 | -------------------------- |-----------------|-----------------|-----------------|
 | 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` |
+| vertical| boolean | false | Per default this template is horizontally split (two columns). Turn this property to `true` too display two rows respectively split vertically |
 
 ## Theming
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.0.0-rc.4-2",
+  "version": "1.0.0-rc.4-3",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -28,7 +28,7 @@
     "@deckdeckgo/slide-countdown": "^1.0.0-rc.1",
     "@deckdeckgo/slide-gif": "^1.0.0-rc.1-1",
     "@deckdeckgo/slide-qrcode": "^1.0.0-rc.2",
-    "@deckdeckgo/slide-split": "^1.0.0-rc.1",
+    "@deckdeckgo/slide-split": "^1.0.0-rc.2",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-video": "^1.0.0-rc.1-1",
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-3",

docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx

@@ -30,7 +30,11 @@ export class AppSlideContent {
 <p>The &quot;Split&quot; slide is a simple slide which display two panes on the page.</p>
 <h2 id="app-slide-split-table-of-contents">Table of contents</h2>
 <ul>
-<li><a href="#app-slide-split-layout">Layout</a></li>
+<li><a href="#app-slide-split-layout">Layout</a><ul>
+<li><a href="#app-slide-split-layout-horizontal">Horizontal</a></li>
+<li><a href="#app-slide-split-layout-vertical">Vertical</a></li>
+</ul>
+</li>
 <li><a href="#app-slide-split-installation">Installation</a><ul>
 <li><a href="#app-slide-split-from-a-cdn">From a CDN</a></li>
 <li><a href="#app-slide-split-from-npm">From NPM</a></li>
@@ -46,10 +50,11 @@ export class AppSlideContent {
 <li><a href="#app-slide-split-theming">Theming</a></li>
 </ul>
 <h2 id="app-slide-split-layout">Layout</h2>
+<p>This template could split the content in two different ways.</p>
+<h3 id="app-slide-split-horizontal">Horizontal</h3>
 <div class="container ion-margin">
   <deckgo-deck embedded={true}>
     <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>
@@ -60,6 +65,20 @@ export class AppSlideContent {
   </deckgo-deck>
 </div>
 
+<h3 id="app-slide-split-vertical">Vertical</h3>
+<div class="container ion-margin">
+  <deckgo-deck embedded={true}>
+    <deckgo-slide-split vertical={true}>
+        <p slot="start">
+          The content you want to display on the top of the page
+        </p>
+        <p slot="end">
+          The content you want to display on the bottom of the page
+        </p>
+      </deckgo-slide-split>
+  </deckgo-deck>
+</div>
+
 <h2 id="app-slide-split-installation">Installation</h2>
 <p>This template could be added to your presentation using the following methods.</p>
 <blockquote>
@@ -116,6 +135,12 @@ export class AppSlideContent {
 <td>false</td>
 <td>If you would provide actions for the all deck and a specific one for this slide, set this option to <code>true</code></td>
 </tr>
+<tr>
+<td>vertical</td>
+<td>boolean</td>
+<td>false</td>
+<td>Per default this template is horizontally split (two columns). Turn this property to <code>true</code> too display two rows respectively split vertically</td>
+</tr>
 </tbody></table>
 <h2 id="app-slide-split-theming">Theming</h2>
 <p>The following theming options will affect this component if set on its host or parent.</p>