react-compare-slider

<div align="center"> <h1>React 对比滑块</h1> <p>并排或上下对比两个组件。</p>

</div>

特性

支持响应式图片和其他任何 React 组件（picture、video、canvas、iframe 等）
支持横向和纵向布局
无障碍访问 – 内置屏幕阅读器和键盘支持
简单的 API
无主见且完全可定制 – 可选择使用自己的组件和样式
响应式和流畅，具有内在尺寸
体积小巧，零依赖
类型安全

演示

Storybook：文档、演示、自定义配方、自定义滑块、useReactCompareSliderRef
CodeSandbox：基础演示
本地示例

使用方法

安装

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`