Набор офисных пользовательских интерфейсов Fabric OfficeCard OverflowDocumentCount

Question

Есть ли способ установить или отключить OverflowDocumentCount для DocumentCard? В настоящее время по умолчанию установлено значение 3, и я не могу изменить его:

Я бы хотел показать все файлы в основном.

Answer 1

К сожалению, ни с помощью DocumentCardPreview компонент методов, ни с помощью свойств (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>
  );
}

Демо

Answer 2

Вы можете использовать опору getOverflowDocumentCountText для компонента DocumentCardPreview для настройки текста переполнения.

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

Он принимает функцию, которая (необязательно) берет счетчик переполнения и возвращает строку:

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

Вот демоверсия CodeSandbox в действии.