Componente da lista de arquivos no Microsoft Graph Toolkit

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

O componente Lista de arquivos exibe uma lista de várias pastas e arquivos usando o nome do arquivo/pasta, um ícone e outras propriedades especificadas por você. Este componente usa o componente mgt-file . Você pode especificar uma unidade ou site específico, exibir uma lista de arquivos com base no tipo de insight (tendências, usado ou compartilhado) ou fornecer consultas a uma lista personalizada de arquivos. O componente também fornece a opção de permitir que os usuários carreguem arquivos para um local especificado no OneDrive ou no SharePoint.

Exemplo

O exemplo a seguir exibe um arquivo usando o mgt-file-list componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

HTML
React

[Abra este exemplo no mgt.dev](https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Propriedades

Você pode usar várias propriedades para personalizar o componente.

Atributo	Propriedade	Descrição
consulta de lista de arquivos	fileListQuery	A consulta completa ou o caminho para a unidade ou site que contém a lista de arquivos a serem renderizados.
consultas de arquivo	fileQueries	Uma matriz de consultas de arquivo renderizadas pelo componente.
-	arquivos	Uma matriz de arquivos para obter ou definir a lista de arquivos renderizados pelo componente. Use esta propriedade para acessar os arquivos carregados pelo componente. Defina este valor para carregar seus próprios arquivos.
tipo insight	insightType	Defina para mostrar os arquivos mais populares, usados ou compartilhados do usuário.
ID da unidade	driveId	ID da unidade à qual a pasta pertence. Também deve fornecer um ou `item-iditem-path`.
ID de grupo	groupId	ID do grupo ao qual a pasta pertence. Também deve fornecer um ou `item-iditem-path`.
site-id	siteId	ID do site ao qual a pasta pertence. Também deve fornecer um ou `item-iditem-path`. Forneça `list-id` se você estiver fazendo referência a um arquivo de uma lista específica.
ID do usuário	userId	ID do usuário ao qual os arquivos pertencem. Também deve fornecer um ou `item-iditem-path`. Forneça `list-id` se você estiver fazendo referência a um arquivo de uma lista específica.
item-id	itemID	ID da pasta. A consulta padrão é `/me/drive/items`. Forneça `drive-id`, `group-id`, `site-id`, ou `user-id` para consultar um local específico.
caminho do item	itemPath	Caminho do item da pasta (relativo à raiz). A consulta padrão é `/me/drive/root`. Forneça `drive-id`, `group-id`, `site-id`, ou `user-id` para consultar um local específico.
exibição de item	itemView	Define quais dados serão renderizados (somente ícone de arquivo, oneLine, twoLines, threeLines). O padrão é 'threeLines'
Tamanho da página	pageSize	Um valor numérico para indicar o número máximo de arquivos a serem renderizados em cada página. Observação:`page-size` não é compatível com `insight-type`.
Extensões de arquivo	fileExtensions	Uma matriz de extensões de arquivo usadas para filtrar arquivos a serem mostrados.
Botão ocultar mais arquivos	hideMoreFilesButton	Booleano para indicar se um botão deve ser mostrado para renderizar mais arquivos.
habilitar-arquivo-carregar	enableFileUpload	Booleano para habilitar ou desabilitar a funcionalidade de carregamento de arquivo. O valor padrão é `false`.
Extensões de arquivo excluídas	excludedFileExtensions	Matriz de cadeia de caracteres de extensões de arquivo a serem excluídas do carregamento de arquivo. Também deve definir o `enable-file-upload` atributo como `true`.
Tamanho máximo do arquivo	maxFileSize	Um número que representa o tamanho máximo de carregamento de arquivo (KB). Também deve definir o `enable-file-upload` atributo como `true`.
max-upload-file	maxUploadFile	Um número que representa o número máximo de arquivos com permissão para serem carregados. O valor padrão é `10` arquivos. Também deve definir o `enable-file-upload` atributo como `true`.
desativar-abrir-ao-clicar	disableOpenOnClick	Booleano para habilitar ou desabilitar o comportamento padrão de abrir um arquivo em uma guia separada do navegador quando clicado.

O exemplo a seguir altera o comportamento do componente para buscar uma lista de arquivos de uma consulta específica.

<mgt-file-list
  file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>

O exemplo a seguir altera o comportamento do componente para buscar uma lista de arquivos de uma pasta fornecendo a ID da pasta.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos de um grupo, fornecendo a ID do grupo e o caminho da pasta.

<mgt-file-list
  group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
  item-path="/Design"
></mgt-file-list>

O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos de um usuário, fornecendo a ID do usuário e a ID da pasta.

<mgt-file-list
  user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
  item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>

O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos fornecendo o tipo de insight.

<mgt-file-list insight-type="shared"></mgt-file-list>

O exemplo a seguir habilita o recurso de carregamento de arquivo.

<mgt-file-list enable-file-upload></mgt-file-list>

O exemplo a seguir limita o número máximo de arquivos que podem ser carregados para 5.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

O exemplo a seguir limita o tamanho máximo de arquivo que pode ser carregado a 10.000 KB.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

O exemplo a seguir exclui o upload de arquivos com extensões de arquivo ".doc, .pdf".

<mgt-file-list
  excluded-file-extensions=".doc,.pdf"
  enable-file-upload
></mgt-file-list>

Propriedades personalizadas CSS

O mgt-file-list componente define as seguintes propriedades personalizadas 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;
}

Para saber mais, consulte Componentes de estilo.

Métodos

Método	Descrição
reload(clearCache = false)	Chame o método para recarregar o componente com novos dados potenciais com base em suas propriedades. Passe `true` para limpar o cache antes de recarregar.

Exemplo de recarregamento

Você pode usar o reload() método exposto no mgt-file-list obtendo a mgt-file-list referência do DOM e disparando o método em um botão usando o click evento.

<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);
});

Eventos

Evento	Quando é emitido	Dados personalizados	Cancelável	Bolhas	Funciona com modelo personalizado
`itemClick`	Acionado quando o usuário seleciona um arquivo.	Arquivo selecionado	Não	Não	Sim, com um modelo de arquivo personalizado.

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

O mgt-file-list componente oferece suporte a muitos modelos que permitem substituir certas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos tipos de dados listados na tabela a seguir.

Tipo de dados	Contexto de dados	Descrição
Padrão.	`files`: lista de objetos de arquivo	O modelo padrão substitui todo o componente pelo seu.
file	`file`: objeto de arquivo	O modelo usado para renderizar cada arquivo.
sem dados	Nenhum contexto de dados é passado	O modelo usado quando não há dados disponíveis.
carregando	Nenhum contexto de dados é passado	O modelo usado enquanto o componente carrega o estado.

Exemplo de uso de modelo

<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>

Permissões do Microsoft Graph

Este componente usa as seguintes APIs do Microsoft Graph. Para cada chamada à API, uma das permissões listadas é necessária.

Configuração	Permissões	API
Padrão (nenhum identificador ou consulta fornecida)	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`
Fornecer `{drive-id}` E `{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`
Fornecer `{group-id}` E `{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`
Forneça SOMENTE `{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`
Fornecer `{site-id}` E `{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`
Fornecer `{user-id}` E `{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`
Fornecer `{drive-id}` E `{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`
Fornecer `{group-id}` E `{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`
Fornecer `{site-id}` E `{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`
Fornecer `{user-id}` E `{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`
Forneça apenas `{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` está definido como `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` está definido como `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` está definido como `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
O fornecimento `enable-file-upload` de requisitos adicionais	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Subcomponentes

O mgt-file-list componente consiste em um ou mais subcomponentes que podem exigir permissões diferentes das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente: mgt-file.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.

Cache

Loja de objetos	Dados armazenados em cache	Comentários
`fileLists`	Lista de listas de arquivos	Lista de cache padrão para armazenar listas de arquivos.
`insightfileLists`	Lista de listas de arquivos de insight	Usado quando `insightType` é fornecido.

Observação

O mgt-file-list componente também usa o fileQueries repositório de objetos no IndexedDB para armazenar arquivos em mgt-file cache quando fileQueries for fornecido.

Para obter detalhes sobre como configurar o cache, consulte Cache.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, consulte Localizando componentes.

Nome da cadeia de caracteres	Valor padrão
mostrarmaissubtítulo	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Comentários

Esta página foi útil?

Last updated on 2026-08-24