Можно ли стилизовать заголовки столбцов Office Fabric DetailsList? - PullRequest
Новая
       8

Можно ли стилизовать заголовки столбцов Office Fabric DetailsList?

0 голосов
/ 04 декабря 2018

Я просматривал документацию офисной фабрики, кажется, есть четкая информация о том, как стилизовать элементы / контент внутри DetailsList (у https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns есть пример), но нет информации о том, как стилизовать заголовки столбцов.(или если это возможно).

Кажется, это довольно распространенный вариант использования (я пытаюсь отцентрировать заголовки столбцов, а не выравнивать их по левому краю и сделать их больше), поэтому не уверен, что япросто что-то упустил?

1 Ответ

0 голосов
/ 05 декабря 2018

Один из вариантов настройки заголовков столбцов: переопределить рендеринг заголовков с помощью события onRenderDetailsHeader, а затем отобразить всплывающую подсказку заголовка с пользовательским стилем , как показано ниже 

<DetailsList
    items={sortedItems as any[]}
    setKey="set"
    columns={columns}
    onRenderDetailsHeader={this.renderDetailsHeader}
  />


private renderDetailsHeader(detailsHeaderProps: IDetailsHeaderProps) {
    return (
      <DetailsHeader
        {...detailsHeaderProps}
        onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
      />
    );
  }

  private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps) {
    return (
      <span
        style={{
          display: "flex",
          fontFamily: "Tahoma",
          fontSize: "14px",
          justifyContent: "center",
        }}
      >
        {tooltipHostProps.children}
      </span>
    );
  }

Демо

...