Компонент списка файлов в Microsoft Graph Toolkit
В компоненте Список файлов отображается список из нескольких папок и файлов с помощью имени файла или папки, значка и других указанных свойств. Этот компонент использует компонент mgt-file . Вы можете указать конкретный диск или сайт, отобразить список файлов в зависимости от типа аналитики (трендовый, используемый или общий) или предоставить запросы к пользовательскому списку файлов. Компонент также позволяет пользователям отправлять файлы в указанное расположение в One Drive или SharePoint.
Пример
В следующем примере показан файл с помощью mgt-file-list компонента . Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.
Свойства
Для настройки компонента можно использовать несколько свойств.
| Атрибут | Свойство | Описание |
|---|---|---|
| file-list-query | fileListQuery | Полный запрос или путь к диску или сайту, который содержит список файлов для отрисовки. |
| file-запросы | fileQueries | Массив запросов к файлам, отображаемых компонентом. |
| - | files | Массив файлов для получения или задания списка файлов, отображаемых компонентом. Используйте это свойство для доступа к файлам, загруженным компонентом. Задайте это значение, чтобы загрузить собственные файлы. |
| тип аналитики | insightType | Задайте для отображения популярных, используемых или общих файлов пользователя. |
| идентификатор диска | driveId | Идентификатор диска, к которому принадлежит папка. Также необходимо указать или item-iditem-path. |
| group-id | groupId | Идентификатор группы, к которой принадлежит папка. Также необходимо указать или item-iditem-path. |
| идентификатор сайта | siteId | Идентификатор сайта, к которому принадлежит папка. Также необходимо указать или item-iditem-path. Укажите list-id , если вы ссылаетесь на файл из определенного списка. |
| user-id | userId | Идентификатор пользователя, которому принадлежат файлы. Также необходимо указать или item-iditem-path. Укажите list-id , если вы ссылаетесь на файл из определенного списка. |
| item-id | Itemid | Идентификатор папки. Запрос по умолчанию — /me/drive/items. Укажите drive-id, group-id, site-idили user-id для запроса определенного расположения. |
| путь к элементу | itemPath | Путь к элементу папки (относительно корня). Запрос по умолчанию — /me/drive/root. Укажите drive-id, group-id, site-idили user-id для запроса определенного расположения. |
| представление элемента | itemView | Задает данные для отрисовки (только значок файла, oneLine, twoLines threeLines). Значение по умолчанию — threeLines. |
| размер страницы | Pagesize | Числовое значение, указывающее максимальное количество файлов для отображения на каждой странице. Примечание:page-size не поддерживается с insight-type. |
| расширения файлов | fileExtensions | Массив расширений файлов, используемых для фильтрации файлов для отображения. |
| кнопка hide-more-files | hideMoreFilesButton | Логическое значение, указывающее, следует ли отображать кнопку для отрисовки дополнительных файлов. |
| enable-file-upload | enableFileUpload | Логическое значение для включения или отключения функции отправки файлов. Значение по умолчанию — false. |
| excluded-file-extensions | excludedFileExtensions | Массив строк расширений файлов, которые должны быть исключены из отправки файлов. Необходимо также задать атрибуту enable-file-upload значение true. |
| max-file-size | Maxfilesize | Число, представляющее максимальный размер отправляемого файла (КБ). Необходимо также задать атрибуту enable-file-upload значение true. |
| max-upload-file | maxUploadFile | Число, представляющее максимальное число файлов, разрешенных для отправки. Значение по умолчанию — 10 files. Необходимо также задать атрибуту enable-file-upload значение true. |
| disable-open-on-click | disableOpenOnClick | Логическое значение, чтобы включить или отключить поведение по умолчанию при открытии файла на отдельной вкладке браузера при щелчке. |
В следующем примере изменяется поведение компонента, чтобы получить список файлов из определенного запроса.
<mgt-file-list
file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>
В следующем примере изменяется поведение компонента, чтобы получить список файлов из папки, указав идентификатор папки.
<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>
В следующем примере изменяется поведение компонента, чтобы получить список файлов из группы, указав идентификатор группы и путь к папке.
<mgt-file-list
group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
item-path="/Design"
></mgt-file-list>
В следующем примере изменяется поведение компонента, чтобы получить список файлов от пользователя, указав идентификатор пользователя и идентификатор папки.
<mgt-file-list
user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>
В следующем примере изменяется поведение компонента для получения списка файлов путем предоставления типа аналитики.
<mgt-file-list insight-type="shared"></mgt-file-list>
В следующем примере включается функция отправки файлов.
<mgt-file-list enable-file-upload></mgt-file-list>
В следующем примере максимальное количество файлов, которые можно отправить, ограничивается до 5.
<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>
В следующем примере максимальный размер файла, который можно отправить, ограничивается 10 000 КБ.
<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>
В следующем примере исключается отправка файлов с расширениями файлов ".doc, .pdf".
<mgt-file-list
excluded-file-extensions=".doc,.pdf"
enable-file-upload
></mgt-file-list>
Настраиваемые свойства CSS
Компонент mgt-file-list определяет следующие настраиваемые свойства CSS.
<mgt-file-list class="file-list" insight-type="shared"></mgt-file-list>
.file-list {
/** mgt-file-upload custom styling */
--file-upload-background-color-drag: rgb(255, 0, 0, 0.5);
--file-upload-border-drag: 2px groove black;
--file-upload-button-background-color: orange;
--file-upload-button-background-color-hover: green;
--file-upload-button-text-color: whitesmoke;
--file-upload-dialog-background-color: azure;
--file-upload-dialog-text-color: yellow;
--file-upload-dialog-replace-button-background-color: white;
--file-upload-dialog-replace-button-background-color-hover: gray;
--file-upload-dialog-replace-button-text-color: black;
--file-upload-dialog-keep-both-button-background-color: black;
--file-upload-dialog-keep-both-button-background-color-hover: gray;
--file-upload-dialog-keep-both-button-text-color: white;
--file-upload-button-border: 2px dotted yellow;
--file-upload-dialog-replace-button-border: 2px dotted;
--file-upload-dialog-keep-both-button-border: 2px dashed;
--file-upload-dialog-border: 2px solid blue;
--file-upload-dialog-width: 300px;
--file-upload-dialog-height: 100px;
--file-upload-dialog-padding: 36px;
/** mgt-file custom styling */
--file-type-icon-height: 30px;
--file-border: 4px dotted #ffbdc3;
--file-border-radius: 8px;
--file-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
--file-background-color: #e0f8db;
--file-background-color-focus: yellow;
--file-background-color-hover: green;
--file-padding: 8px;
--file-padding-inline-start: 12px;
--file-margin: 3px 4px;
--file-line1-font-size: 15px;
--file-line1-font-weight: 500;
--file-line1-color: gray;
--file-line1-text-transform: capitalize;
--file-line2-font-size: 14px;
--file-line2-font-weight: 300;
--file-line2-color: #e50000;
--file-line2-text-transform: lowercase;
--file-line3-font-size: 13px;
--file-line3-font-weight: 500;
--file-line3-color: purple;
--file-line3-text-transform: capitalize;
/** mgt-file-list CSS tokens */
--file-list-background-color: #e0f8db;
--file-list-box-shadow: none;
--file-list-border: 4px dotted #ffbdc3;
--file-list-border-radius: 10px;
--file-list-padding: 0;
--file-list-margin: 0;
--show-more-button-background-color: #fef8dd;
--show-more-button-background-color--hover: #ffe7c7;
--show-more-button-font-size: 14px;
--show-more-button-padding: 16px;
--show-more-button-border-bottom-right-radius: 12px;
--show-more-button-border-bottom-left-radius: 12px;
}
Дополнительные сведения см. в статье Компоненты стиля.
Методы
| Метод | Описание |
|---|---|
| reload(clearCache = false) | Вызывает метод для перезагрузки компонента с потенциальными новыми данными на основе его свойств. Перед перезагрузкой перед перезагрузкой перед перезагрузкой перейдите true к очистке кэша. |
Пример перезагрузки
Вы можете использовать reload() метод, который предоставляется mgt-file-list в , получив ссылку mgt-file-list из DOM и активировав метод в кнопке с помощью click события.
<mgt-file-list insight-type="shared"></mgt-file-list>
<button id="reload-btn">Reload Files</button>
const fileList = document.querySelector("mgt-file-list");
document.getElementById("reload-btn").addEventListener("click", () => {
// passing true will clear file cache before reloading
fileList.reload(true);
});
События
| Событие | Когда он генерируется | Пользовательские данные | Отменяемым | Пузыри | Работает с пользовательским шаблоном |
|---|---|---|---|---|---|
itemClick |
Срабатывает, когда пользователь выбирает файл. | Выбранный файл | Нет | Нет | Да, с пользовательским шаблоном файла . |
Дополнительные сведения об обработке событий см. в разделе События.
Шаблоны
Компонент mgt-file-list поддерживает множество шаблонов , позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте <template> элемент внутри компонента и задайте data-type для него значение одного из типов данных, перечисленных в следующей таблице.
| Тип данных | Контекст данных | Описание |
|---|---|---|
| default | files: список объектов файлов |
Шаблон по умолчанию заменяет весь компонент вашим собственным компонентом. |
| file | file: объект file |
Шаблон, используемый для отрисовки каждого файла. |
| no-data | Контекст данных не передан | Шаблон, используемый, если данные недоступны. |
| loading | Контекст данных не передан | Шаблон, используемый при загрузке состояния компонента. |
Пример использования шаблона
<mgt-file-list insight-type="shared">
<template data-type="loading">
<p>Getting files</p>
</template>
<template data-type="no-data">
<p>No files found</p>
</template>
<template data-type="file">
<p>File name{{file.name}}</p>
</template>
</mgt-file-list>
Разрешения Microsoft Graph
Этот компонент использует следующие API Microsoft Graph. Для каждого вызова API требуется одно из перечисленных разрешений.
| Конфигурация | Разрешения | API |
|---|---|---|
| По умолчанию (идентификаторы или запросы не предоставляются) | Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /me/drive/root/children |
Укажите {drive-id} И {item-id} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /drives/{drive-id}/items/{item-id}/children |
Укажите {group-id} И {item-id} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /groups/{group-id}/drive/items/{item-id}/children |
Укажите ТОЛЬКО {item-id} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /me/drive/items/{item-id}/children |
Укажите {site-id} И {item-id} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /sites/{site-id}/drive/items/{item-id}/children |
Укажите {user-id} И {item-id} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /users/{user-id}/drive/items/{item-id}/children |
Укажите {drive-id} И {item-path} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /drives/{drive-id}/root:/{item-path}:/children |
Укажите {group-id} И {item-path} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /groups/{group-id}/root:/{item-path}:/children |
Укажите {site-id} И {item-path} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /sites/{site-id}/root:/{item-path}:/children |
Укажите {user-id} И {item-path} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /users/{user-id}/root:/{item-path}:/children |
Предоставьте только {item-path} |
Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All | GET /me/drive/root:/{item-path}:/children |
insight-type для задано значение trending |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/trending |
insight-type для задано значение used |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/used |
insight-type для задано значение shared |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/shared |
Дополнительно требуется предоставление enable-file-upload |
Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All | PUT /me/drive/root:/{filename}:/content POST /me/drive/root:/{filename}:/createUploadSession |
Подкомпоненты
Компонент mgt-file-list состоит из одного или нескольких подкомпонентов, для которых могут потребоваться разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту: mgt-file.
Проверка подлинности
Для получения требуемых данных в средстве управления используется глобальный поставщик проверки подлинности, указанный в документации по проверке подлинности.
Кэш
| Хранилище объектов | Кэшированные данные | Замечания |
|---|---|---|
fileLists |
Список списков файлов | Список кэша по умолчанию для хранения списков файлов. |
insightfileLists |
Список списков файлов аналитических сведений | Используется при insightType указании. |
Примечание.
Компонент mgt-file-list также использует fileQueries хранилище объектов в mgt-file IndexedDB для кэширования файлов при fileQueries предоставлении.
Дополнительные сведения о настройке кэша см. в разделе Кэширование.
Локализация
Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о настройке локализации см. в разделе Локализация компонентов.
| Имя строки | Значение по умолчанию |
|---|---|
| showMoreSubtitle | Show more items |
| filesSectionTitle | Files |
| sharedTextSubtitle | Shared |
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по