Office UI Fabric DocumentCard设置OverflowDocumentCount

Question

是否可以设置或禁用DocumentCard的OverflowDocumentCount？当前默认设置为3，我似乎无法更改它：

我希望基本上显示所有文件。

Answer 1

不幸的是，既无法通过DocumentCardPreview component方法也无法通过属性（IDocumentCardPreviewProps），无法修改预览模式下的项目限制。

但是您可以考虑引入一个 custom 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

Answer 2

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

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

它带有一个函数，该函数（可选）将溢出计数并返回一个字符串：

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

这里有CodeSandbox demo在起作用。