Add a new tab to the sidebar - React PDF Viewer

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

想表白的四季豆 · Developing on Staxmanade· 1 周前 ·

文雅的椅子 · ReactJS ...· 1 周前 ·

奋斗的香蕉 · Understanding the ...· 1 周前 ·

玉树临风的鸡蛋 · React, Inline ...· 1 周前 ·

买醉的手链 · Why react does not ...· 1 周前 ·

绅士的闹钟 · Resolve a DOI Name· 2 周前 ·

踢足球的火腿肠 · 塞尔维亚国家概况· 7 月前 ·

任性的大象 · 机器学习方法和应用-智慧地铁福建省高校重点实验室· 1 年前 ·

文质彬彬的小刀 · BZLM不战联盟国际互刷【coc互刷吧】_百度贴吧· 1 年前 ·

飘逸的饼干 · 斗罗大陆：唐舞桐不愧为小舞的女儿，两人撒娇的 ...· 1 年前 ·

React PDF Viewer

This example demonstrates how we can add a new tab to the sidebar which is created by the Default Layout plugin .

A tab is constructed by three properties:

Property	Type	Description	From
` content `	` ReactElement `	The tab content	2.3.0
` icon `	` ReactElement `	The tab icon	2.3.0
` title `	` string `	The tab title	2.3.0

To make the tab's icon looks the same as other tabs, you can wrap the icon in the

component provided by the


         `
         
         @react-pdf-viewer/core
         
         `

package.

import { Icon } from '@react-pdf-viewer/core';

<Icon size={16}>// The body of SVG icon</Icon>;

The following example adds a new tab which is used in the highlight plugin example:

import { Icon } from '@react-pdf-viewer/core';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    sidebarTabs: (defaultTabs) =>
        defaultTabs.concat({
            content: <div style={{ textAlign: 'center', width: '100%' }}>Notes are listed here</div>,
            icon: (
                <Icon size={16}>
                    <path d="M23.5,17a1,1,0,0,1-1,1h-11l-4,4V18h-6a1,1,0,0,1-1-1V3a1,1,0,0,1,1-1h21a1,1,0,0,1,1,1Z" />
                    <path d="M5.5 12L18.5 12" />
                    <path d="M5.5 7L18.5 7" />
                </Icon>
            ),
            title: 'Notes',
        }),
});

// Render
<Viewer fileUrl="..." plugins={[defaultLayoutPluginInstance]} />;

( The sample code )