简介
bespoke-backdrop 是一个 npm 包，用于在 Bespoke.js 中创建背景，支持各种自定义选项。Bespoke.js 是一个基于事件的现代演示库，支持多种插件。
在此文中，我们将介绍如何在 Bespoke.js 中使用 bespoke-backdrop 包，并详细讲解其选项，以及一些示例代码。
安装
安装 bespoke-backdrop 包可以使用 npm 命令：
npm install bespoke-backdrop
或者，您也可以使用 yarn 命令：
yarn add bespoke-backdrop
接下来，您需要引入 Bespoke.js 和 bespoke-backdrop 包：
// 引入 Bespoke.js
const bespoke = require('bespoke');
// 引入 bespoke-backdrop 包
const bespokeBackdrop = require('bespoke-backdrop');使用
现在，您已经成功的安装和引入了 bespoke-backdrop 包，接下来您需要使用它来为您的 Bespoke.js 演示创建背景。
-- -------------------- ---- ------- -- -- ---------- ----- ------- - ------------------- -- -- ---------------- - ----- --------------- - ---------------------------- -- ---- ----- ------------ - ----------------------------- - -- -- ---------------- ------ ----------------- ---
在上面的代码中，我们首先创建了一个 Bespoke.js 演示，并将 ID 为 presentation 的元素作为其参数。然后，我们将 bespoke-backdrop 插件作为参数传递给演示的 option 数组中。
请注意，在使用 bespoke-backdrop 之前，您必须确保其依赖的 CSS 文件已在您的项目中正确安装并加载。
选项
bespoke-backdrop 插件支持多种选项，您可以使用这些选项来自定义演示中的背景。下面是当前支持的所有选项和如何使用它们。
classes
此选项允许您添加一个或多个自定义 CSS 样式的名称，以额外将类添加到背景元素上。示例：
bespokeBackdrop({
classes: 'my-class another-class'
});styles
此选项允许您添加自定义 CSS 样式到背景元素上。示例：
bespokeBackdrop({
styles: {
backgroundColor: 'red'
}
});clickToExit
此选项允许您启用从背景中退出插件。如果设置为 true，则允许用户单击背景来退出它。示例：
bespokeBackdrop({
clickToExit: true
});keysToExit
此选项允许您设置用户通过按键退出背景的键。示例：
bespokeBackdrop({
keysToExit: [27, 13]
});示例
下面是一个完整的 bespoke-backdrop 示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- --------------------
----- ---------------- -------------------
----- ---------------- ----------------------------
-------
------
-------- ------------------
-------------- -----------
-------------- -----------
-------------- -----------
-------------- -----------
-------------- -----------
----------
------- --------------------------
------- -------------------------------
------- -----------------------------------
--------
----- ------- - -------------------
----- ----------- - ------------------------
----- --------------- - ----------------------------
----- ------------ - ----------------------------- -
--------------
-----------------
-------- -----------
------- -
---------------- -----
--
------------ -----
----------- ---- ---
--
---
---------
-------
-------在上面的代码中，我们首先将 bespoke.css 和 bespoke-backdrop.css 文件添加到我们演示的 HTML 文件中。接下来，我们引入了所有必需的 Bespoke.js 插件，包括 bespoke-keys 和 bespoke-backdrop。然后，我们按前面的介绍使用 bespoke-backdrop。
总结
通过使用这个教程，您现在知道了如何使用 bespoke-backdrop 包在 Bespoke.js 演示中创建背景，并了解了其所有选项及如何使用它们。请从这个示例开始，感受 bespoke-backdrop 的强大功能。
我们希望您能够从这篇文章中学到想要掌握的所有内容，同时希望能够帮助您更好地使用 bespoke-backdrop。祝您开心学习和创作！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184013