Question

我使用的Office UI Fabric组件存在布局问题。这可能特定于该框架中的组件，但我将其作为flexbox的一般HTML / CSS问题来说明。通常，我试图设计一种布局，该布局具有两个网格（DetailsList）组件，每个组件都位于页面类型容器（Pivot）中。我还需要将标签标题和搜索框固定在顶部，将按钮固定在底部（无论列表在网格中有多短）。如果列表的内容很长，我只希望滚动条在网格中可见，而在父容器中不可见（否则，您必须向下滚动才能看到“重要按钮”）。

我可以使用ScrollablePane组件使此布局在没有数据透视的情况下工作。像这样：

但是我不知道如何设计，所以枢轴导航器也固定在顶部。我能做的最好的事显示在this example on StackBlitz（the editable link）中，或按照以下屏幕截图显示：

这是当前布局的一个精简版本，所有内容均已停靠并正确滚动，但滚动列表时枢轴从视图中滚动出了

.app-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;  
      position: absolute;
      top: 0;
      bottom: 0;
    }
    .app-defaultFlex {
      flex: 1;
      position: relative;
    }
    .app-buttonContainer{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: white
    }

    <div id='FlexTest' className='app-wrapper'>
    	<div className='header'>
    	  {header}
    	</div>
    	<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} className='app-defaultFlex'>
    		<Pivot>
    			<PivotItem id='PivotItemAllProjects' headerText="All Projects">
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    			<PivotItem headerText="Recent" id='PivotItemRecentProjects'>
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    		</Pivot>;
    	</ScrollablePane>
    	<div className='footer app-buttonContainer'>
    	  <DefaultButton className='app-FileButton' primary={true} disabled={false}>File to Project</DefaultButton>
    	</div>
    </div>

是否可以使用flexbox将“数据透视”选项卡停靠在顶部，以便它们仍在视图中？我已经尝试了多种变体（请参见我的StackBlitz示例中的pivot2-pivot5变体），但我无法弄清楚这是否是可以用flexbox解决的问题，还是我使用ScrollablePane组件的方式的局限性带有嵌入式枢轴。

更新5/28/2019：

即使将其简化为仅具有一个包含一个DetailsList的PivotItem的Pivot组件，我也看不到使用Sticky组件之类的东西或任何种类的flex布局如何都能工作，此伪代码：

<Pivot>
  <Sticky stickyPosition={StickyPositionType.Header}>
	<PivotItem
	  id='PivotItemAllProjects'
	  headerText="All Projects"
	>
	  <DetailstList>
	  ..foo
	  </DetailsList>
	</PivotItem>
  </Sticky>
</Pivot>

包装每个单独的PivotItem不起作用-根本不渲染任何东西。此外，这意味着我们要粘贴数据透视标签，这是孩子。即使将PivotItem包装在页眉Sticky中，而将PivotItem的子包装在页脚Sticky中也不起作用。我在这里追寻不可能吗？

Answer 1

为什么需要将“轴心”放在“可滚动窗格” div中？如果将枢轴放置在页眉中，那么您会得到想要的，不是吗？

否则，您可以将“数据透视”包装在“粘性”组件中。

ETA：哇，我去链接了Sticky组件，但似乎不存在。

使用Flexbox将可滚动容器停靠在选项卡面板（Office UI Fabric Pivot）样式布局中

1 个答案: