Example: 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

Related examples