使蚂蚁设计模式可调整大小

时间:2018-12-10 20:33:42

标签: javascript reactjs antd

我正在使用Ant Design的Modal组件,他们似乎并未将可调整性实现到其模式中。我希望能够在打开模态后手动调整其大小。有什么办法吗?

3 个答案:

答案 0 :(得分:0)

简单的答案是:不。

您可以更改主题中的预设大小,但不能使其动态调整大小。

我猜想,要自行实现会非常棘手。选择另一个具有此功能的小部件(不是来自Ant Design)可能更简单,例如https://www.npmjs.com/package/react-modal-resizable-draggable

答案 1 :(得分:0)

所以我最终要做的是使用react-resizable并在模态主体中创建一个ResizableBox。虽然目前还不完善,但这绝对是让我前进的东西。这是我正在做一些https://codesandbox.io/s/l9y9jrk4ym

修改工作的codesandbox

答案 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>

    )
}