我正在使用Ant Design的Modal组件,他们似乎并未将可调整性实现到其模式中。我希望能够在打开模态后手动调整其大小。有什么办法吗?
答案 0 :(得分:0)
简单的答案是:不。
您可以更改主题中的预设大小,但不能使其动态调整大小。
我猜想,要自行实现会非常棘手。选择另一个具有此功能的小部件(不是来自Ant Design)可能更简单,例如https://www.npmjs.com/package/react-modal-resizable-draggable
答案 1 :(得分:0)
所以我最终要做的是使用react-resizable
并在模态主体中创建一个ResizableBox
。虽然目前还不完善,但这绝对是让我前进的东西。这是我正在做一些https://codesandbox.io/s/l9y9jrk4ym
答案 2 :(得分:0)
简单的答案是:是的,使用独创性
import React, { useState, useEffect } from 'react'
const ModalView = () => {
const [visible, setVisible] = useState(false);
const getWindowDimensions = () => {
const { innerWidth: width, innerHeight: height } = window
return { width, height }
}
const useWindowDimensions = () => {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
useEffect(() => {
const handleResize = () => setWindowDimensions(getWindowDimensions())
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
return windowDimensions
}
const { width } = useWindowDimensions();
return (
<Modal
closable={true}
centered
style={{ width: (80 * width / 100), minWidth: (80 * width / 100) }}
visible={visible}
onCancel={() => setVisible(false)}
footer={false}
>
/** your component **/
</Modal>
)
}