如何解决是否可以在Material UI SWipeableDrawer中定义一个不通过关闭抽屉来响应滑动的区域
我在SwipeableDrawer中有一个带有照片滑块的组件。并且在尝试滑动照片期间,抽屉关闭。抽屉中是否可以定义一个不会因关闭抽屉而对刷卡做出响应的区域?在文档中,我找到了“ SwipeAreaProps”属性,但是如何使用它尚不清楚。SwipeableDrawer layout
我的抽屉代码定义
<SwipeableDrawer
className={classes.drawerClass}
anchor="left"
classes={{
paper: classes.drawerPaper,}}
transitionDuration={200}
open={detailDrawerOpen}
>
<DrawerBackButton onClick={onBack} />
<DetailDrawerContext.Provider value={{ onPhotoSave }}>
<ScrollBar>
<DrawerContainer>
<DetailDrawerHeader
monument={monument}
onMonumentPhotoClicked={onMonumentPhotoClicked}
/>
<DetailDrawerContent monument={monument} />
</DrawerContainer>
</ScrollBar>
</DetailDrawerContext.Provider>
{monument ? (
<React.Fragment>
{photoDialogShow ? (
<PhotoLightbox
open={photoDialogOpen}
setOpen={setPhotoDialogOpen}
monumentPhotos={monument.monumentPhotos}
initIndex={selectedMonumentPhotoIndex}
/>
) : null}
</React.Fragment>
) : null}
</SwipeableDrawer>
DetailDrawerHeader
import React,{ useState } from "react";
import { makeStyles } from "@material-ui/core";
import DrawerBackButton from "../../common/drawer-back-button/drawer-back-button";
import PhotoCarousel from "./photo-carousel/photo-carousel";
const useStyles = makeStyles((theme) => ({
imagesContainer: {
width: "100%",height: theme.detailDrawerHeaderHeight,flexShrink: 0
},}));
export default function DetailDrawerHeader({monument,onMonumentPhotoClicked = p => p}) {
const classes = useStyles();
return (
<div className={classes.imagesContainer}>
<PhotoCarousel data={monument && monument.monumentPhotos} onMonumentPhotoClicked={onMonumentPhotoClicked}/>
</div>
);
}
PhotoCarousel视图
return (
<div className={styles.container}>
<SwipeableViews
disableLazyLoading={false}
index={currentIndex}
animateTransitions={animateTransitions}
onChangeIndex={onChangeIndexHandle}
>
{sortedPhotos.map((monumentPhoto,i) => (
<img
className={styles.img}
onClick={() => onMonumentPhotoClicked(monumentPhoto)}
src={monumentService.getPhotoLink(monumentPhoto.photoId,500)}
key={i}
/>
))}
</SwipeableViews>
{currentIndex !== 0 ? (
<CarouselButtonContainer attachTo="left">
<IconButton onClick={onLeftButtonClick}>
<ArrowBackIosIcon className={styles.arrowIcon} />
</IconButton>
</CarouselButtonContainer>
) : null}
{currentIndex < sortedPhotos.length - 1 ? (
<CarouselButtonContainer attachTo="right">
<IconButton onClick={onRightButtonClick}>
<ArrowForwardIosIcon className={styles.arrowIcon} />
</IconButton>
</CarouselButtonContainer>
) : null}
</div>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。