material-ui 版本v5.12.2 可拖拽卡片
时间: 2024-05-13 20:15:27 浏览: 100
很高兴为您解答这个问题!对于 material-ui 版本 v5.12.2,您可以使用 `@mui/lab` 中的 `Draggable` 组件来实现可拖拽卡片。以下是一个使用 `Draggable` 组件的示例代码:
```jsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { Draggable } from '@mui/lab';
import { Paper } from '@mui/material';
const StyledPaper = styled(Paper)(({ theme }) => ({
height: 200,
width: 200,
cursor: 'move',
'&:hover': {
boxShadow: theme.shadows[8],
},
}));
export default function DraggableCard() {
return (
<Draggable>
<StyledPaper>
{/* 卡片内容 */}
</StyledPaper>
</Draggable>
);
}
```
在上面的示例中,我们使用 `styled` 函数来自定义 `Paper` 组件的样式,并将其包装在 `Draggable` 组件中。`Draggable` 组件允许用户拖动其子元素,从而实现了可拖拽的效果。
希望这个回答能够帮助到您!如果您有任何其他问题,请随时问我。
阅读全文