npm包@dbmdz/mirador-multipagenavigation使用教程-JavaScript中文网-JavaScript教程资源分享门户

Mirador是一款开源的图像阅读器，它允许用户以更直观，更易于使用的方式查看和比较多幅图像。在Mirador中，@dbmdz/mirador-multipagenavigation是用于多页面展示的npm包。本文将详细介绍如何使用它，并提供一些示例代码帮助您更好地理解。

安装

使用以下命令安装@dbmdz/mirador-multipagenavigation：

npm install --save @dbmdz/mirador-multipagenavigation

用法

在Mirador中使用@dbmdz/mirador-multipagenavigation与使用其他组件一样。只需将其添加到您的Mirador构建中即可。在此之前，请确保已正常设置Mirador。

如果您使用的是Mirador v3.0.0或更高版本，请按照以下步骤进行操作：

将您的Mirador构建导入您的JavaScript文件中：

import { MiradorViewer } from 'mirador/dist/es/src/index';

导入@dbmdz/mirador-multipagenavigation：

import { multipageNavigationPlugin } from '@dbmdz/mirador-multipagenavigation';

将multipageNavigationPlugin添加到Mirador构建中的工具配置项：

const miradorInstance = Mirador.viewer(config, [
  multipageNavigationPlugin,
  // 其他插件
]);

以上就是基本的@dbmdz/mirador-multipagenavigation使用方式。下面我们来详细看一下它的配置项和示例代码。

配置

@dbmdz/mirador-multipagenavigation具有多个可调整的配置项，以满足您对多页面展示的各种需求。下面我们来逐一介绍这些配置项。

转换页面

可以使用这个配置项来更改多页面展示面板中如何转换页面。 Mirador支持多种不同的翻页方式，包括：

scrolling：沿样式表滚动内容
facing：向下翻页
individual：一个一次展示一页

在配置项中设置paging可能会像这样：

{
  paging: {
    default: 'scrolling',
    options: ['scrolling', 'facing', 'individual'],
  },
}

面板位置

使用此配置项可以更改多页面展示面板的位置。此行将定义一个相对于Mirador中间容器的top、bottom、left和right属性。您可以将位置设置为top、bottom、right和left。

{
  position: 'top',
}

页面缩放级别

使用这个配置项来改变多页面展示面板中最初的页面缩放级别。

{
  defaultZoomLevel: 0.5,
}

fit

在Mirador中，您可以选择让每一页的高度在可见区域内尽可能适合页面，或者让页面单独滚动。使用此选项可以为多页面展示面板自定义适合性。

{
  fit: 'height',
}

聚焦面板

当多个面板出现在Mirador中时，您可以使用此选项将焦点设置到所选面板中。

{
  focused: true,
}

页眉和页脚

使用此选项将添加页眉和页脚插件，并在多页展示面板中显示页眉和页脚。

{
  height: '24px',
  pageNumbersEnabled: false,
  selectorEnabled: false,
  titleEnabled: false,
  width: '24px',
}

示例代码

-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- -------------------------------------

----- ------ - -
  --- ----------
  -------- -
    -
      --------------- ------------------------------------------------------
      ------------ --
    --
  --
--

----- --------------- - ---------------------- -
  --------------------------
  -
    ------- -
      -------- ------------
      -------- ------------- --------- --------------
    --
    --------- -------
    ----------------- ----
    ---- ---------
    -------- -----
    ------- -------
    ------------------- ------
    ---------------- ------
    ------------- ------
    ------ -------
  --
---

以上就是如何使用@dbmdz/mirador-multipagenavigation的完整示例代码。根据您的需要，您可以自定义配置项并根据必要性选择添加或删除可用的插件。

结论

本文介绍了如何使用npm包@dbmdz/mirador-multipagenavigation。除了基本的使用方法之外，我们还深入介绍了配置项和提供了示例代码，希望这能帮助您更好地理解和掌握它。使用npm包@dbmdz/mirador-multipagenavigation可以更好地定制Mirador图像阅读器的多页面展示，从而提高用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066efe4c49986ca68d8b2c