Question

我正在为Patternfly-React创建NotificationDrawer组件。我的决赛之一是在窗口调整大小时让抽屉动态改变高度。

drawer-pf确实会改变它的身高，但它的孩子并没有。 规则是始终保持“读取/清除”按钮和其他面板可见。 我设法用JS解决了这个问题，事件监听器将内联css注入panel-body max-height属性。

这仅适用于Chrome / Firefox，其他浏览器遇到滞后/断断续续。我想知道是否可以单独用CSS解决这个问题，我想到了Flexbox，这就是我所得到的：

.drawer-pf {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
    }
.panel-group, .panel, .panel-collapse {
      display: flex;
      flex-direction: column;
    }
.panel-group {
      flex: 1 0 auto;
    }
.panel-heading {
      flex: none;
    }
.panel {
      flex: none;
    }
.panel-expanded {
      flex: 1 1 auto;
    }
.panel-collapse {
      flex: 1 1 auto;
    }
.panel-expanded .panel-body {
      flex: 1 1 auto;
      overflow-y: auto;
      height: 150px;  /* this sets a min-height for the scrolling contents  */
    }

.panel-expanded .drawer-pf-action {
  flex: none;
}

结果不够好，我想我错过了什么。

Storybook

您可以在故事书中看到Stateful Drawer Wrapper观看想要的行为，Drawer Wrapper不包含JS功能，您可以在那里测试CSS。或者您可以克隆my branch并将css应用于/sass/patternfly-react/_notificationdrawer.scss

感谢您的帮助！

窗口调整大小

0 个答案: