Web-presentation NPM

web-presentation

A presentation framework created with web components

Lightweight
No dependencies
Modular
Extendable

Example

http://christiankohler.github.io/web-presentation/

Plunks

Try web-presentation ..

http://plnkr.co/edit/uU2lbg?p=preview

http://plnkr.co/edit/rTH17v?p=preview

Getting Started

Install web-presentation with npm

npm i web-presentation

Get web-presentation via bower

bower install web-presentation

Include the dist/web-presentation.html file in your project.

<link rel="import" href="web-presentation.html">

Use the web slide component in your html file.

<web-presentation>
  <web-presentation-keyboardcontrols></web-presentation-keyboardcontrols>
  <web-slide-title>
    <h1>web-presentation</h1>
    <h2>Pure Webcomponents Presentation Framework</h2>
  </web-slide-title>
  <web-slide>
    <h1>Native, fast, extendable</h1>
    <h2>..and only one file to import</h2>
  </web-slide>
</web-presentation>

API

Components

Component	Description
`web-presentation`	The presentation element which contains all slides
`web-slide`	The slide element has to be within a web-presentation element
`web-slide-title`	The title is the same element as web-slide. The idea is to make it easier to style all title slide
`web-presentation-keyboardcontrols`	One way to control the presentation. Use left and right arrow keys or space to go to the next slide
`web-presentation-progress`	Displays a progress bar on the bottom of the screen

Transitions

Usage:

  <web-slide-title data-transition="fall">

Available transitions:

fall
moveFromTop
moveToLeft
moveFromBottom
newspaper
fadeIn
fadeInFromTop
fadeInFromBottom

If you want to add a transitions to this library please make a pull-request.

Fragments

Show parts of a slide step by step.

Show:

  <ul>
    <li data-enter="1">First</li>
    <li data-enter="99">Last</li>
    <li data-enter="2">Second</li>
  </ul>

Hide:

  <div data-exit="1">Hide me</div>

Mixed:

  <!-- step1:shows p1 / step2:shows p2 / step3:hides div1 and shows div2-->
  <div id="div1" data-exit="10">
    <p data-show="1">Show first</p>
    <p data-show="2">Show second</p>
  </div>
  <div id="div2" data-show="10">Show after</div>