Question

我只是想使用GroupedList实现类似Bootstrap collapsible的功能。

我试图通过将styles道具应用于GroupedList来隐藏标题计数。这是示例代码。

  private _overrideStyles() {
   return {
     root: [
      "ms-customRoot",
         {
           color: "red"
          }
      ],
      headerCount: ["ms-customHeader", { display: "none" }]
     };
 }

 render() {
  return (
   <div>
   <GroupedList
      items={this._items}
      selectionMode={SelectionMode.none}
      onRenderCell={this._onRenderCell}
      styles={this.overrideStyles.bind(this)}
      groups={[
        {
          count: 3,
          key: "test-group",
          name: "Test group",
          startIndex: 0
        }
      ]}
    />
  </div>
  )
 }

“ ms-customRoot”类适用于组标题，但“ ms-customHeader”类不适用于标头计数范围。

Answer 1

可以通过GroupedList.groupProps属性覆盖标题的呈现函数来隐藏标题计数：

<GroupedList
      groupProps={{
            onRenderHeader: this.onRenderHeader
      }}
      ...    
 />

，然后指定headerCount这样的自定义样式：

private onRenderHeader(headerProps:IGroupDividerProps,defaultRender:IRenderFunction<IGroupHeaderProps>) {
    const headerCountStyle:IStyle = { display: 'none' };
    return (
      <span>
          {defaultRender({...headerProps, styles: {headerCount: headerCountStyle}})}
      </span>
    );
}

Here is a demo供参考

如何在office-ui-fabric中隐藏GroupedList标头中的计数？

1 个答案: