Create a floating toolbar

The following example creates a floating toolbar with different slots provided by the Toolbar plugin.
To display the toolbar at the bottom of the container, we set its position as absolute:
<div
style={{
position: 'relative',
}}
>
<div
style={{
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 0)',
zIndex: 1,
}}
>
{/* Render the toolbar */}
...
</div>
{/* The viewer is shown here */}
...
</div>
The toolbar is constructed by different slots as following:
<Toolbar>
{(props: ToolbarSlot) => {
const {
CurrentPageInput,
Download,
EnterFullScreen,
GoToNextPage,
GoToPreviousPage,
NumberOfPages,
Print,
ZoomIn,
ZoomOut,
} = props;
return (
<>
<div style={{ padding: '0px 2px' }}>
<ZoomOut />
</div>
<div style={{ padding: '0px 2px' }}>
<ZoomIn />
</div>
<div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
<GoToPreviousPage />
</div>
<div style={{ padding: '0px 2px' }}>
<CurrentPageInput /> / <NumberOfPages />
</div>
<div style={{ padding: '0px 2px' }}>
<GoToNextPage />
</div>
<div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
<EnterFullScreen />
</div>
<div style={{ padding: '0px 2px' }}>
<Download />
</div>
<div style={{ padding: '0px 2px' }}>
<Print />
</div>
</>
);
}}
</Toolbar>
/ 0

See also