0

是我的代码。

我的问题是,如何在不使用 h-100 类的情况下使用卡片组件来填充 SplitPane 的第一个窗格?

这是因为当我在 Card 组件中使用 h-100 类时,当用户在移动平台上点击输入框时,它会破坏布局。

我尝试使用“flex-grow-1”类来解决问题,但是它不起作用。

除此之外,我不确定 react-split-pane 是否有自己的方向更改事件处理方法。如果是这样,请告诉我。

4

1 回答 1

0

实现 usingflex-grow-1将不起作用,因为如果您检查元素,Card组件的父级是由 生成的附加div元素SplitPane并且不是flex容器。

您仍然可以使用h-100,但为了解决“small window.innerHeight”设备上的布局问题(例如您描述的在移动设备上打开虚拟键盘的场景),您只需在条件语句中进行调整即可评估是否SplitPane应该切换split道具horizontalvertical

在下面的示例中,您可以看到我将左侧窗格的“最小宽度”考虑在内,以考虑widthStackBlitz 示例代码中的输入字段,该示例代码设置182px为我查看过的。

this.setOrientation = () => {

  let leftPanelMinWidth = 182;

  if (window.innerHeight > window.innerWidth - leftPanelMinWidth) {
    this.setState({ splitDirection: "horizontal" });
  } else {
    this.setState({ splitDirection: "vertical" });
  }
}

我想您可以在组件安装时在逻辑上实现相同的功能。

于 2020-08-23T03:09:16.983 回答