React组件以使用滑块比较两个图像

时间:2024-06-28 09:26:05
【文件属性】:

文件名称:React组件以使用滑块比较两个图像

文件大小:1.82MB

文件格式:ZIP

更新时间:2024-06-28 09:26:05

Photo / Image

React 比较图像 简单的 React 组件使用滑块比较两个图像。 注意:Vue.js 版本也可用! 演示和示例代码演示和示例代码功能简单响应(始终适合父宽度)水平和垂直比较如何使用 yarn add react-compare-image // 或 npm install --save react-compare-image 注意:版本 1或更高版本仅适用于 React16.8 或更高版本。 请改用版本 0。 从 'react-compare-image' 导入 ReactCompareImage; ; Props Prop (* required) type 默认描述 aspectRatio 'taller' or 'wider' 'taller' 如果图像的纵横比不同,选择哪个手柄元素 null 自定义手柄元素。 刚刚通过 如果你想删除手柄。 handleSize number (px) 40 滑块手柄的直径(按像素) hover boolean false 是否在悬停时滑动 leftImage * string null 左图的 url leftImageAlt string


【文件预览】:
react-compare-image-master
----.nvmrc(8B)
----.babelrc(221B)
----stories()
--------index.stories.tsx(6KB)
----images()
--------anime.gif(1.09MB)
--------image2.png(5KB)
--------image1-taller.png(6KB)
--------image2-wider.png(8KB)
--------image1.png(5KB)
--------taller-image.png(6KB)
--------images.ai(207KB)
--------wider-image.png(6KB)
----.storybook()
--------config.js(320B)
--------addons.js(48B)
--------preview-head.html(326B)
--------webpack.config.js(1KB)
----package.json(3KB)
----.firebaserc(67B)
----.github()
--------FUNDING.yml(20B)
--------workflows()
----firebase.json(144B)
----jest.config.js(261B)
----LICENSE(1KB)
----webpack.production.config.js(808B)
----.prettierrc.toml(146B)
----.loki()
--------reference()
--------.gitignore(19B)
----src()
--------ReactCompareImage.tsx(14KB)
--------setupTests.js(156B)
--------ReactCompareImage.test.tsx(4KB)
----.npmignore(354B)
----.eslintrc.js(498B)
----tsconfig.json(386B)
----.gitignore(78B)
----README.md(5KB)
----yarn.lock(514KB)
----.node-version(7B)

网友评论