带有 Fluent UI Pivot 的粘性标签栏答案

【问题标题】：Sticky tab bar with Fluent UI's Pivot带有 Fluent UI Pivot 的粘性标签栏
【发布时间】：2020-11-06 20:50:46
【问题描述】：

我正在使用 Fluent UI 的 Pivot 组件构建一个选项卡式环境。某些选项卡（或 Fluent UI 用语中的 PivotItems）很长，需要可滚动。有没有办法让标签栏保持粘性，使其保持在框架顶部并且无论用户滚动到标签上的哪个位置都可见？

【问题讨论】：

【解决方案1】：

要获得预期的行为，您只需要一些CSS。

将body 和html 中的height 设置为100vh 和overflow: hidden 以避免出现多个滚动条。

body, html {
  height: 100vh; /* Viewport height */
  overflow: hidden; /* To avoid multiple scrollbars */
}

作为一个工作示例，我将使用Links of large tab style。每个项目的内容都呈现在 PivotItem Component 内。所以，你必须在上面加上一些样式：

const pivotItemStyles = {
  height: 'calc(100vh - 44px)',
  overflow: 'auto',
}

PivotTabs 默认使用height: 44px 这就是我将计算放在高度属性中的原因。 overflow: auto 是获取可滚动内容。参考：Pivot.styles.ts

【讨论】：

感谢您的解决方案，马尔科。它可以为我工作并完成工作。我认为理想情况下，Fluent UI 应该公开一个允许使标签栏保持粘性的属性，以避免在 PivotItems 的高度属性中依赖硬编码常量 (44px)。