这是我的代码。
我的问题是,如何在不使用 h-100 类的情况下使用卡片组件来填充 SplitPane 的第一个窗格?
这是因为当我在 Card 组件中使用 h-100 类时,当用户在移动平台上点击输入框时,它会破坏布局。
我尝试使用“flex-grow-1”类来解决问题,但是它不起作用。
除此之外,我不确定 react-split-pane 是否有自己的方向更改事件处理方法。如果是这样,请告诉我。
这是我的代码。
我的问题是,如何在不使用 h-100 类的情况下使用卡片组件来填充 SplitPane 的第一个窗格?
这是因为当我在 Card 组件中使用 h-100 类时,当用户在移动平台上点击输入框时,它会破坏布局。
我尝试使用“flex-grow-1”类来解决问题,但是它不起作用。
除此之外,我不确定 react-split-pane 是否有自己的方向更改事件处理方法。如果是这样,请告诉我。
实现 usingflex-grow-1
将不起作用,因为如果您检查元素,Card
组件的父级是由 生成的附加div
元素SplitPane
并且不是flex
容器。
您仍然可以使用h-100
,但为了解决“small window.innerHeight”设备上的布局问题(例如您描述的在移动设备上打开虚拟键盘的场景),您只需在条件语句中进行调整即可评估是否SplitPane
应该切换split
道具horizontal
或vertical
在下面的示例中,您可以看到我将左侧窗格的“最小宽度”考虑在内,以考虑width
StackBlitz 示例代码中的输入字段,该示例代码设置182px
为我查看过的。
this.setOrientation = () => {
let leftPanelMinWidth = 182;
if (window.innerHeight > window.innerWidth - leftPanelMinWidth) {
this.setState({ splitDirection: "horizontal" });
} else {
this.setState({ splitDirection: "vertical" });
}
}
我想您可以在组件安装时在逻辑上实现相同的功能。