FluentUI 有什么好的方法可以在详细信息列表上设置粘性列标题吗？

Question

我的目标是在滚动条上显示带有 Sticky Headers 的详细信息列表，我发现的每个解决方案都遇到了问题。

ScrollablePane包裹列表的推荐解决方案，以及带有Sticky组件的onRenderDetailsHeader（https://github.com/microsoft/fluentui/issues/1146）将列表放在UI上的绝对位置。

FluentUI网站（https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane）推荐的样式方案，需要提供指定高度

这两种解决方案都需要为列表设置定位，无论是高度还是边距，以便按预期工作。但是，我还需要考虑可能出现在表格上方的错误消息栏，并确保它们没有被覆盖，或者出现双滚动条。任何人都有他们使用过的无缝示例？

Answer 1

FluentUI 没有很好的办法。推荐的解决方案是 ScrollablePane 包裹列表，onRenderDetailsHeader 和 Sticky 组件 (https://github.com/microsoft/fluentui/issues/1146) 将列表放在 UI 上的绝对位置。 FluentUI 网站（https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane）推荐的样式解决方案需要提供指定的高度。这两种解决方案都需要为列表设置定位，无论是高度还是边距，以便按预期工作。但是，我还需要考虑可能出现在表格上方的错误消息栏，并确保它们没有被覆盖，或者出现双滚动条。任何人都有他们使用过的无缝示例？

Answer 2

给你...

对于粘性第一列（水平）：

.ms-DetailsHeader-cell:first-child {
  position: sticky;
  inset: 0;
  background-color: white;
  z-index: 2;
}

.ms-DetailsRow-cell:first-child {
  position: sticky;
  inset: 0;
  background-color: white;
  z-index: 1;
}

对于粘性列标题（垂直）：

const scrollClass = mergeStyleSets({
    detailsListWrapper: {
        height: '320px',
        width: '100%',
        position: 'relative'
    },
});



<Stack horizontal className={scrollClass.detailsListWrapper}>
    <Stack.Item>
        <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} >
            <Shimmer customElementsGroup={getShimmerData(4)} width="300" height="400" isDataLoaded={!dataLoading}>
                <DetailsList
                    items={entities}
                    compact={isCompactMode}
                    columns={columns}
                    selectionMode={SelectionMode.single}
                    getKey={this._getKey}
                    setKey="single"
                    layoutMode={DetailsListLayoutMode.justified}
                    constrainMode={ConstrainMode.unconstrained}
                    isHeaderVisible={true}
                    selection={this._selection}
                    selectionPreservedOnEmptyClick={true}
                    onItemInvoked={this._onItemInvoked}
                    enterModalSelectionOnTouch={true}
                    ariaLabelForSelectionColumn="Toggle selection"
                    ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                    checkButtonAriaLabel="select row"
                    onRenderDetailsHeader={this._renderFixedDetailsHeader}
                    styles={{ contentWrapper: { cursor: "pointer", width: '100%' } }}
                />
            </Shimmer>
        </ScrollablePane>
    </Stack.Item>
</Stack >



private _renderFixedDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
    if (!props) {
        return null;
    }
    const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> =
        tooltipHostProps => (
            <TooltipHost {...tooltipHostProps} />
        );
    return (
        <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
            {defaultRender!({
                ...props,
                onRenderColumnHeaderTooltip,
            })}
        </Sticky>
    );
}