Office UI Fabric DocumentCard 集 OverflowDocumentCount

Question

有没有办法设置或禁用DocumentCard的OverflowDocumentCount？目前它默认为 3，我似乎无法更改它：

我想基本上显示所有文件。

Answer 1

您可以在 DocumentCardPreview 组件上使用 getOverflowDocumentCountText 属性来自定义溢出文本。

<DocumentCard>
  <DocumentCardPreview
    previewImages={previewImages}
    getOverflowDocumentCountText={getOverflowDocumentCountText}
  />
</DocumentCard>

它接受一个函数，该函数（可选）接受溢出计数和 returns 一个字符串：

const getOverflowDocumentCountText = (overflowCount) => "+ 315 more";

这是一个 CodeSandbox demo 的实际效果。

Answer 2

遗憾的是，无论是通过 DocumentCardPreview component 方法还是通过属性 (IDocumentCardPreviewProps)，都无法修改预览模式下的项目限制。

但是你可以考虑引入一个自定义 DocumentCardPreview组件来显示所有项目，例如：

const MyDocumentCardPreview = (props: IDocumentCardPreviewProps) => {
  const { previewImages } = props;

  const fileListItems = previewImages.map((file, fileIndex) => (
    <li key={fileIndex}>
      <Image
        className={css(
          "ms-DocumentCardPreview-fileListIcon",
          styles.fileListIcon
        )}
        src={file.iconSrc}
        role="presentation"
        alt=""
        width="16px"
        height="16px"
      />
      <Link {...file.linkProps}>{file.name}</Link>
    </li>
  ));

  return (
    <div
      className={css(
        "ms-DocumentCardPreview",
        styles.preview,
        "is-fileList " + styles.previewIsFileList
      )}
    >
      <ul className={css("ms-DocumentCardPreview-fileList", styles.fileList)}>
        {fileListItems}
      </ul>
    </div>
  );
}

Demo

Office UI Fabric DocumentCard 集 OverflowDocumentCount

Office UI Fabric DocumentCard Set OverflowDocumentCount

office-ui-fabric