API – Nextra

PhotoProvider

Name	Description	Type	Default Value
mode	可选 drag 模式，视图内自由拖拽图片，触屏设备下强制 slide 模式	drag \| slide	slide
children		React.ReactNode	Required*
onIndexChange		(index: number, state: PhotoProviderState) => void
onVisibleChange		(visible: boolean, index: number, state: PhotoProviderState) => void
loop	是否循环预览，达到该数量则启用	boolean \| number	3
speed	动画速度	(type: ActiveAnimationType) =>number	() => 400
easing	动画函数	(type: ActiveAnimationType) =>string	() => 'cubic-bezier(0.25, 0.8, 0.25, 1)'
photoClosable	图片点击是否可关闭	boolean
maskClosable	背景点击是否可关闭	boolean	true
maskOpacity	默认背景透明度	number \| null	1
pullClosable	下拉是否可关闭	boolean	true
overlayRender	自定义渲染覆盖物	(overlayProps: OverlayRenderProps) => React.ReactNode
className		string
maskClassName		string
photoWrapClassName		string
photoClassName		string
loadingElement	自定义 loading	JSX.Element
brokenElement	自定义加载失败渲染	JSX.Element \| ((photoProps: BrokenElementParams) => JSX.Element)
portalContainer		HTMLElement	document.body
enableMouseZoom	是否启用鼠标缩放	boolean	true

Name	Description	Type	Default Value
src	图片地址	string
render	自定义渲染，优先级比 src 低	(props: PhotoRenderParams) => React.ReactNode
overlay	图片覆盖物	React.ReactNode
width	自定义渲染节点宽度	number
height	自定义渲染节点高度	number
children	子节点，一般为缩略图	React.ReactElement
triggers	触发打开图片的方式	Array<"onClick" \| "onDoubleClick">	["onClick"]

Name	Description	Type	Default Value
key	唯一标识	number \| string	Required*
src	资源地址	string
render	自定义渲染，优先级比 src 低	(props: PhotoRenderParams) => React.ReactNode
overlay	图片覆盖物	React.ReactNode
width	自定义渲染节点宽度	number
height	自定义渲染节点高度	number
originRef	触发 ref	React.MutableRefObject<HTMLElement \| null>

Name	Description	Type	Default Value
mode	模式	drag \| slide	Required*
images	图片列表	DataType[]	Required*
index	当前索引	number	Required*
onIndexChange	索引改变回调	(index: number) => void	Required*
visible	是否可见	boolean	Required*
onClose	关闭事件回调	(evt?: React.MouseEvent \| React.TouchEvent) => void	Required*
overlayVisible	覆盖物是否可见	boolean	Required*
overlay	图片覆盖物	React.ReactNode	Required*
rotate	当前旋转角度	number	Required*
onRotate	旋转事件回调	(rotate: number) => void	Required*
scale	当前缩放	number	Required*
onScale	缩放事件回调	(scale: number) => void	Required*