Docs
Plugins
Localizations
Examples
Updates
Purchase

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>
(The sample code)
/ 0

See also