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

Question

我只是想使用GroupedList实现像Bootstrap collapsible这样的功能。

我试图通过对GroupedList应用styles属性来隐藏头计数。以下是示例代码。

  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