<div
style={{
position: 'relative',
}}
>
<div
style={{
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 0)',
zIndex: 1,
}}
>
{}
...
</div>
{}
...
</div>
<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>