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.

Keynote component comes with a few different themes included black, white, league, beige, sky, night, serif, simple, solarized, blood, moon.

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vertical Slide 1

Vertical Slide 2

Slide 3

Source

<pe:keynote theme="simple" width="480" height="350" style="width: 50vw; height: 50vh;">
    <pe:keynoteItem>
        <h2>Slide 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </pe:keynoteItem>
    <pe:keynoteItem>
        <pe:keynoteItem>
            <h2>Vertical Slide 1</h2>
        </pe:keynoteItem>
        <pe:keynoteItem>
            <h2>Vertical Slide 2</h2>
        </pe:keynoteItem>
    </pe:keynoteItem>
    <pe:keynoteItem>
        <h2>Slide 3</h2>
    </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: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01