在 Web 前端开发中，展示图片和媒体信息是常见的功能需求。而轻量、易用、可配置的图片展示组件是我们所需要的。在这个需求下，react-accessibile-lightbox（以下简称 RAL）应运而生。他是一个用 React 实现的轻量、易用、可配置的图片展示组件，并且支持无障碍访问。
本文将详细介绍 RAL 的使用方法，从安装到实现，方便读者使用该组件库完成项目开发。
安装
使用 NPM 安装 RAL
$ npm install react-accessibile-lightbox --save
使用
引入
使用 RAL 时，可以在需要的组件中进行 import 引入。
import Lightbox from 'react-accessibile-lightbox' import 'react-accessibile-lightbox/dist/index.css'
其中 index.css 用于提供组件的样式。
属性
RAL 组件有几个常用的属性：
| 属性名 | 类型 | 描述 |
|---|---|---|
| images | array of string | 需要展示的图片地址集合，非常重要的属性。 |
| title | string | 设置 lightbox 的标题。 |
| onClose | function | 点击关闭按钮时调用的函数。 |
| className | string | 定义 lightbox 的css 类，使用于定制组件样式。 |
| index | number | 展示第几张图片，默认值为 0。 |
| showThumbs | boolean | 设置是否显示缩略图导航，默认为 true。 |
| showClose | boolean | 设置是否展示关闭按钮，默认值为 true。 |
| showCaption | boolean | 如果为 true，标记图片标题将显示。默认值为 true。 |
| loop | boolean | 当达到图像库的末尾或开头时，设置是否绕回到另一侧以循环。默认为 false。 |
| prevLabel | string | 改变前一个按钮的标签。 |
| nextLabel | string | 改变下一个按钮的标签。 |
| closeLabel | string | 改变关闭按钮的标签。 |
| zoomInLabel | string | 缩放按钮，调大图像。 |
| zoomOutLabel | string | 缩放按钮，缩小图像。 |
| initialZoom | string | 设置图片的缩放级别，取值有‘auto’，‘fill’ 和‘contain’。 |
示例
下面的示例展示了一个相册应用程序，其中您可以查看图像并从导航中选择缩略图
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ -------- ---- ----------------------------
------ -------------------------------------------
----- ------ - -
---------------------------------------------
---------------------------------------------
---------------------------------------------
---------------------------------------------
---------------------------------------------
-
----- --- - -- -- -
----- -------------- ---------------- - -----------
----- -------------- ---------------- - ---------------
------ -
-----
-----
-----
----------- ------------
------
-----
------------------- ------ -- -
----
-----------
-----------
----------- -- -
----------------------
---------------------
--
------
--
---
------
------------- -- -
---------
-------------------------- -- -- ---- ----- ----
----------- -- -----------------------
--------------------
-----------------
--
--
------
------
-
-
------ ------- ---结束语
本文主要介绍了 RAL，这是一个轻量、易用、可配置的图片展示组件，支持无障碍访问。在项目中使用 RAL 可以方便快捷完成图片展示的功能。在这里，我们向 RAL 的开发者表示敬意，感谢他们开发出这么好的的组件，使我们的工作更加轻松和愉悦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730881e8991b448e9343