Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Keynote

An HTML presentation component that enables to create fully-featured and beautiful presentations.

It's possible and often times more convenient to write presentation content using Markdown. To create a Markdown slide, add the markdown="true" attribute to your pe:keynoteItem element and wrap the contents in it.

Slides can be separated by pe:keynoteItem or regexp. They are separated by three dashes by default in markdown mode.

Note that markdown codes are sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

Slide 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Source

<pe:keynote width="480" height="350" style="width: 50vw; height: 50vh;">
    <pe:keynoteItem markdown="true">
## Slide 1
A paragraph with some text and a [link](https://www.primefaces.org/showcase-ext/views/home.jsf).
---
## Slide 2
* item1
* item2
---
## Slide 3
    </pe:keynoteItem>
    <pe:keynoteItem markdown="true">
## Slide 4
A

 ---

B

 ---

C
    </pe:keynoteItem>
    <pe:keynoteItem markdown="true" separator="^\n---\n$" separatorVertical="^\n--\n$">
## Slide 5
Section 5.1

--

## Slide 5
Section 5.2

---

## Slide 6
    </pe:keynoteItem>
    <pe:keynoteItem>
        <h2>Slide 7</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </pe:keynoteItem>
</pe:keynote>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value Collection of items (KeynoteItem) representing model of this component.
var Name of the request-scoped variable for the underlaying object for each iteration.
width Width of presentation in CSS pixels.
height Height of presentation in CSS pixels.
margin Factor of the display size that should remain empty around the content. Default is 0.04.
minScale Bounds for smallest possible scale to apply to content. Default is 0.2.
maxScale Bounds for largest possible scale to apply to content. Default is 2.0.
autoSlide Controls automatic progression to the next slide in milliseconds. Default value is 0.
center Vertical centering of slides. Default value is true.
controls Display presentation control arrows. Default value is true.
disableLayout Disables the default slide layout (scaling and centering) so that you can use custom CSS layout. Default value is false.
embedded Flags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen. Default value is false.
loop Loop the presentation. Default value is false.
navigationMode Changes the behavior of our navigation directions. Values are default/linear/grid. Default value is default.
progress Display a presentation progress bar. Default value is true.
showNotes Flags if speaker notes should be visible to all viewers. Default value is false.
slideNumber Display the page number of the current slide. "h.v": Horizontal . vertical slide number, "h/v": Horizontal / vertical slide number, "c": Flattened slide number, "c/t": Flattened slide number / total slides, "false": Hide slide number. Default value is false.
touch Enables touch navigation on devices with touch input. Default value is true.
transition Transition style. Valid values are none/fade/slide/convex/concave/zoom. Default value is slide.
transitionSpeed Transition speed. Valid values are default/fast/slow. Default value is default.
backgroundTransition Transition style for full page slide backgrounds. Valid values are none/fade/slide/convex/concave/zoom. Default value is fade.
theme The theme to style the presentation with. Valid values are: black, white, league, beige, sky, night, serif, simple, solarized, blood, moon. Default value is none.
library Library name where custom themes of the presentation are located.
styleClass Style class of the main container element. Default value is null.
style Style of the main container element. Default value is null.
Events (move mouse over the names to see classes)
Name Description
slideChangedfires each time the slide changes
slideTransitionEndfires instantly as soon as the slide changes
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 13.0.0,PrimeFaces Extensions: 13.0.1,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2023-09-11 19:07