Components

Keynote

<Keynote> is the root component of every presentation. You would add slides as children to this component.

<div id="app">
  <Keynote>
    <!-- Your slides here! -->
  </Keynote>
</div>

Slide

<Slide> create an empty page in the presentation. There are different variants of slide you could use.

...
  <Slide>
    <h1>Hello World!</h1>
    <p>This is a basic slide.</p>
  </Slide>
...

AuthorSlide

A slide to introduce the author. Commonly included in talks & conferences.

...
  <Author-Slide name="Author Name" photo="http://example.com/images/me.png">
    Developer, Foo Company
  </Author-Slide>
  <!-- or -->
  <Author-Slide name="Authore Name"
               photo="http://example.com/images/me.png"
               bio="Developer, Foo Company"></Author-Slide>
...

An Author Slide

Props:

NameTypeDefaultRequiredDescription
nameString-YesTitle of the slide. Creates an <h2> element.
photoString-YesTitle of the slide. Creates an <img> element.
bioStringnullNoBrief description about the author. Creates a <p> element.
Contents provided to default <slot> overrides this.

PhotoSlide

A slide with fullscreen photo.

...
  <Photo-Slide photo="http://example.com/images/random.png"></Photo-Slide>
...

A Photo Slide

Props:

NameTypeDefaultRequiredDescription
photoString-YesTitle of the slide. Creates an <img> element.

PhotoTitleSlide

A slide with a photo and title.

...
  <Photo-Title-Slide title="An unsplash photo"
                     photo="http://example.com/images/random.png">
    There is a random unsplash photo at top.
  </Photo-Title-Slide>
...

A Photo Title Slide

...
  <Photo-Title-Slide title="A vertical photo"
                     photo="http://example.com/images/random.png"
                     vertical>
    There is a random unsplash photo on right.
  </Photo-Title-Slide>
...

A Photo Title Slide

...
  <Photo-Title-Slide title="A vertical photo"
                     photo="http://example.com/images/random.png"
                     vertical left>
    There is a random unsplash photo on left.
  </Photo-Title-Slide>
...

A Photo Title Slide

Props:

NameTypeDefaultRequiredDescription
titleString-YesTitle of the slide. Creates an <h1> element.
photoString-YesTitle of the slide. Creates an <img> element.
subtitleStringnullNoSubtitle/description for the title. Creates an <h4> element.
Contents provided to default <slot> overrides this.
verticalBooleanfalseNoUse vertical photo layout.
leftBooleanfalseNoWhen used with vertical, photo is on left. In other cases, no side-effects.

TitleSlide

A slide with large title text centered vertically.

...
  <Title-Slide title="A Bold Title">
    A little description about it.
  </Title-Slide>
  <!-- or -->
  <Title-Slide title="A Bold Title"
               subtitle="A little description about it."></Title-Slide>
...

A Title Slide

Props:

NameTypeDefaultRequiredDescription
titleString-YesTitle of the slide. Creates an <h1> element.
subtitleStringnullNoSubtitle/description for the title. Creates an <h4> element.
Contents provided to default <slot> overrides this.

Slide Transitions

Every <*-Slide> component supports animations (actually transitions).

Props:

In addition to <*-Slide> component props documented above, following are also supported:

NameTypeDefaultRequiredDescription
transitionString-NoSlide transition animation.
transition-durationString-NoDuration of the animation.

Available Transitions:

  • clothesline
  • dissolve
  • drop
  • fall
  • move-in
  • pivot
  • push
  • reveal
  • revolving-door
  • scale
  • swap
  • switch
  • twirl