Question

我正在使用ant设计抽屉组件和样式组件。看来我可以用width道具设置一个固定的宽度。但是我无法使其具有响应性。

{{1}}

Answer 1

在我的情况下，这种单线将是最简单的解决方案：

width={window.innerWidth > 900 ? 800 : window.innerWidth - 100}

Answer 2

应该使用className来指定一个CSS类，而不是指定固定宽度，然后您需要对其进行调整以在相应的.less文件中进行响应。像这样：

.my-drawer {
    width: 50%;
}
@media only screen and (max-width: @screen-md) {
    .my-drawer {
        width: 70%;
    }
}

Answer 3

一个实际的解决方案是使用一个表达式。

像const isMobile = true //do a match on something there

并使用该表达式呈现条件百分比，因为属性只是JavaScript，您可以执行类似操作。

width={isMobile ? "80%" : "40%"}

Answer 4

您可以使用global.window.innerWidth来获取设备的宽度并将其设置为抽屉宽度

const fullWidth = global.window.innerWidth

<Drawer
   width={fullWidth}
   placement="right"
   closable={true}
   onClose={this.props.handleDrawer}
   visible={this.props.visible}
>

Answer 5

<Drawer
  className="my-drawer"
  ...

.my-drawer.ant-drawer-open {
  // width: 100% !important; // mask: false
  > .ant-drawer-content-wrapper {
    width: 30% !important;
  }
}

@media (max-width: 767.98px) {
  .my-drawer.ant-drawer-open {
    > .ant-drawer-content-wrapper {
      width: 100% !important;
    }
  }
}

Answer 6

晚会晚了一点，您现在必须已经找到了解决方案，但是考虑回答这个问题，因为我最近遇到了相同的问题，可以进行任何纠正，或者将其标记为“意大利面条代码”。

您可以获取屏幕的innerWidth并相应地自定义抽屉。这会将您的屏幕宽度存储在viewportWidth变量中

if(typeof(window.innerWidth)!='undefined'){
    this.state.viewportWidth = window.innerWidth;
}

现在为您的抽屉设置相应的样式。您可以根据需要设置断点。 700是安全的：

<Drawer
    title="Your Drawer Title"
    width={this.state.viewportWidth>700 ? 200 : 180}
    placement="left"
    closable={false}
    onClose={this.onClose}
    visible={this.state.visible}
>

也。别忘了这可能不适用于IE或更旧的浏览器。

Answer 7

因此，在AntD中基本没有the max-witdh选项，因此您有两种方法可以实现这一目标，

首先具有三元条件：

width={window.innerWidth > 1200 ? 800 : 'auto'}

秒：

width={80%}

如何使ant-design Drawer组件的宽度响应

7 个答案: