特性
- 支持响应式图片和其他任何 React 组件(
picture
、video
、canvas
、iframe
等) - 支持横向和纵向布局
- 无障碍访问 – 内置屏幕阅读器和键盘支持
- 简单的 API
- 无主见且完全可定制 – 可选择使用自己的组件和样式
- 响应式和流畅,具有内在尺寸
- 体积小巧,零依赖
- 类型安全
演示
使用方法
安装
npm install react-compare-slider
# 或
yarn add react-compare-slider
# 或
pnpm add react-compare-slider
基本图片使用
你可以使用 ReactCompareSliderImage
来渲染图片,也可以使用自定义组件。
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
export const Example = () => {
return (
<ReactCompareSlider
itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="图片一" />}
itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="图片二" />}
/>
);
};
属性
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
boundsPadding | number | 0 | 限制 X 轴(横向)或 Y 轴(纵向)可滑动范围的内边距(像素)。 | |
browsingContext | globalThis | globalThis | 绑定事件的上下文(对 iframe 有用)。 | |
changePositionOnHover | boolean | false | 鼠标悬停时滑块是否跟随指针移动。 | |
disabled | boolean | false | 是否禁用滑块移动(项目仍可交互)。 | |
handle | ReactNode | undefined | 自定义滑块组件。 | |
itemOne | ReactNode | ✓ | undefined | 滑块中显示的第一个组件。 |
itemTwo | ReactNode | ✓ | undefined | 滑块中显示的第二个组件。 |
keyboardIncrement | number|`${number}%` | 5% | 滑块手柄聚焦并按下键盘箭头时移动的百分比或像素数量。 | |
onlyHandleDraggable | boolean | false | 是否只在与滑块手柄交互时改变位置(对触摸设备有用)。 | |
onPositionChange | (position: number) => void | undefined | 位置变化时的回调函数,返回当前位置百分比作为参数。 | |
portrait | boolean | false | 是否使用纵向布局。 | |
position | number | 50 | 初始分割线位置的百分比(0-100 )。 | |
transition | string | undefined | 应用于滑块手柄移动的简写 CSS transition 属性。例如:.5s ease-in-out |
更多信息请参阅 API 文档。
真实世界示例
查看 真实世界示例页面。
要求
- React 16.8+
- 官方支持每个主要浏览器的最新两个版本