介绍
crow-media-gallery 是一个基于 react 的 web 图片展示组件库，它使得图片展示更加美观、易用。该库旨在减少前端工作量。
安装
使用 npm 进行安装：
$ npm install crow-media-gallery --save
安装后，你就可以为你的 react 应用导入 crow-media-gallery 组件。
import CrowMediaGallery from 'crow-media-gallery';
使用方法
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------
----- ------- - -- -- -
----- ------ - -
- ---- ---------------------------------------- ---- -------- --
- ---- ---------------------------------------- ---- -------- --
- ---- ---------------------------------------- ---- -------- --
--
------ -
----------------- --------------- --
--
--
------ ------- --------你需要提供一个数组 images，它包含所有你需要展示的图片，这些图片包含 src 和 alt 两个属性。组件会根据传入的图片数组来展示所有图片。
组件 Props
CrowMediaGallery 组件支持以下 Props。
| 属性 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
images |
Array | Yes | - | 展示的图片列表，每个对象包含 src 和 alt 两个属性 |
imageWidth |
Number | No | 400px | 每个图片的宽度 |
imageGap |
Number | No | 16px | 两个图片之间的距离 |
columns |
Number | No | 2 | 展示的列数，根据屏幕宽度自动调整列数，最小为一列 |
mobileColumns |
Number | No | 1 | 移动端展示时，展示的列数，根据屏幕宽度自动调整列数，最小为一列 |
maxHeight |
String | No | auto | 图片展示区域的最大高度 |
onClick |
Function | No | - | 点击图片时的回调函数，参数为当前点击的图片对象 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------
----- ------- - -- -- -
----- ------ - -
- ---- ---------------------------------------- ---- -------- --
- ---- ---------------------------------------- ---- -------- --
- ---- ---------------------------------------- ---- -------- --
--
----- ---------------- - ----- -- -
-------------------
--
------ -
-----------------
---------------
--------------------------
-----------
-----------------
--
--
--
------ ------- --------结语
CrowMediaGallery 是一个好用且易于使用的 react 图片展示库，它支持很多的自定义选项，能满足你的不同需求。使用该库可以大大减少前端工作量，提高开发效率。希望这篇文章对你使用 crow-media-gallery 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572e381e8991b448e9138