Deck

A presentation that shows one slide at a time. Every slide shares the same grid, and is drawn at a fixed size that is scaled to fit the deck, so a slide looks the same in both modes: embedded in a page and in full screen.

The left and right arrow keys move between the slides while the deck has the focus.

While any slide has a `pix-slide-note`, the deck has a button that opens a window with the note of the slide being shown. The window follows the deck from slide to slide and closes when the deck leaves the page.

Import

Importing the library registers <pix-deck>.

import '@ilusiva/pix';

Basic

Another grid and starting slide

Notes for whoever presents

Attributes

Name	Type	Default	Description
`columns`	number	12	Number of columns of the grid shared by the slides.
`rows`	number	8	Number of rows of the grid shared by the slides.
`width`	number	960	Width the slides are drawn at, in pixels, before being scaled to fit.
`height`	number	540	Height the slides are drawn at, in pixels, before being scaled to fit.
`current`	number	1	Number of the slide being shown, starting at 1.
`mode`	'embedded' \| 'fullscreen'	'embedded'	Whether the deck sits in the page or covers the whole window. The button of the deck switches it and also asks the browser for full screen.

Methods

Method	Description
`next(): void`	Shows the next slide. Does nothing on the last one.
`previous(): void`	Shows the previous slide. Does nothing on the first one.
`show(slide: number): void`	Shows the slide with the given number, starting at 1. A number out of range shows the nearest slide.

Events

Name	Description
`change`	Another slide is being shown.
`mode`	The deck switched between embedded and full screen.

Slots

Name	Description
default	Slides of the deck.