A toolbar plugin for Reveal.js to quickly access Reveal functionality. Check out the live demo
This plugin is compatible with the reveal.js-menu plugin.
Download and install the package in your project:
bower install reveal.js-toolbar
Add the plugin to the dependencies in your presentation, as below.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'bower_components/reveal.js-toolbar/toolbar.js' }
]
});
Download and install the package in your project:
npm install --save reveal.js-toolbar
Add the plugin to the dependencies in your presentation, as below.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'node_modules/reveal.js-toolbar/toolbar.js' }
]
});
Copy this repository into the plugins folder of your reveal.js presentation, ie plugins/toolbar
.
Add the plugin to the dependencies in your presentation, as below.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/toolbar/toolbar.js' }
]
});
You can configure the toobar for your presentation by providing a toolbar
option in the reveal.js initialization options. Note that all config values are optional and will default as specified below.
Reveal.initialize({
// ...
toolbar: {
// Specifies where the toolbar will be shown: 'top' or 'bottom'
position: 'bottom',
// Add button to toggle fullscreen mode for the presentation
fullscreen: false,
// Add button to toggle the overview mode on and off
overview: false,
// Add button to pause (hide) the presentation display
pause: false,
// Add button to show the speaker notes
notes: false,
// Add button to show the help overlay
help: false,
// If true, the reveal.js-menu will be moved into the toolbar.
// Set to false to leave the menu on its own.
captureMenu: true,
// If true, the playback control will be moved into the toolbar.
// This is only relevant if the presentation is configured to autoSlide.
// Set to false to leave the menu on its own.
capturePlaybackControl: true,
// By default the menu will load it's own font-awesome library
// icons. If your presentation needs to load a different
// font-awesome library the 'loadIcons' option can be set to false
// and the menu will not attempt to load the font-awesome library.
loadIcons: true
},
});
A 'toolbar-ready' event is fired when reveal.js-toolbar has loaded all non-async dependencies and is ready to start.
Reveal.addEventListener( 'toolbar-ready', function( event ) {
// your code
} );
MIT licensed
Copyright (C) 2017 Greg Denehy