Microsoft Graph 工具包中的文件组件

项目
11/07/2024

文件组件用于表示 OneDrive 或 SharePoint 中的单个文件/文件夹。组件显示文件或文件夹名称、文件类型图标以及作者和上次修改日期等信息。你可以为文件提供标识符，组件会生成查询，以便根据提供的标识符检索文件。此组件可以单独使用，也可以用作 mgt-file-list 组件的一部分。

示例

以下示例使用 mgt-file 组件显示文件。可以使用代码编辑器来查看属性如何更改组件的行为。

HTML
React

在 mgt.dev 中打开此示例。

属性

可以使用多个属性来自定义组件。

属性	属性	说明
file-query	fileQuery	要检索的文件的完整查询或路径。
user-id	userId	用户的 ID。此属性用于获取指定用户的文件。还必须提供 `item-id`、 `item-pathinsight-type` 或 `insight-id`。
drive-id	driveId	文件所属的驱动器的 ID。还必须提供 `item-id` 或 `item-path`。
group-id	groupId	文件所属组的 ID。还必须提供 `item-id` 或 `item-path`。
site-id	siteId	文件所属站点的 ID。还必须提供 `item-id` 或 `item-path`。 `list-id`如果要从特定列表引用文件，也请提供。
list-id	listId	文件所属列表的 ID。还必须提供 `site-id` 和 `item-id`。
item-id	itemId	文件的 ID。默认查询为 `/me/drive/items`。提供 `drive-id`、 `group-id`、 `site-id`或 `user-id` 以查询特定位置。
item-path	itemPath	文件的项路径。默认查询为 `/me/drive/root`。提供 `drive-id`、 `group-id`、 `site-id`或 `user-id` 以查询特定位置。
insight-type	insightType	从中检索文件的见解类型。可以是 `trending`、 `used`或 `shared`。
insight-id	insightId	见解资源的 ID。
file-details	fileDetails	设置为表示文件的对象
file-icon	fileIcon	存储图标的 URL 路径。
-	driveItem	包含项的 Graph 详细信息的对象。
-	fileDetails	包含 DriveItem 的对象。
view	view	设置为控制文件的呈现方式。默认值为 `oneline`。 `image` - 仅显示图标 `oneline` - 显示图标，其中一行文本 (默认为文件 `name`) `twolines` - 显示图标和两行文本 (`name` ， `lastModifiedDateTime` 默认情况下) `threelines` - 默认显示作者的图标和三行文本 (`name`、 `lastModifiedDateTime`和 `displayName`)
line1-property	line1Property	设置要用于第一行文本的的属性 `fileDetails` 。默认为 `name` 文件的。
line2-property	line2Property	设置要用于第二行文本的的属性 `fileDetails` 。默认值为“`lastModifiedDateTime`”。
line3-property	line3Property	设置要用于第三行文本的的属性 `fileDetails` 。默认为 `size` 文件的。

以下示例更改组件的行为，以从特定查询中提取数据。

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>

以下示例更改组件的行为以从特定查询中提取数据，显示三行信息（文件名、上次修改日期时间和默认情况下的文件大小），并设置文件图标。

<mgt-file
  file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
  view="threeLines"
  file-icon="ICON_PATH"
></mgt-file>

以下示例更改组件的行为，以从特定驱动器提取数据。

<mgt-file
  drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
  item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>

以下示例更改组件的行为，以从 SharePoint 网站和路径提取数据。

<mgt-file
  site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
  item-Path="/DemoDocs/AdminDemo"
></mgt-file>

以下示例更改组件的行为，以便按见解类型提取数据。

<mgt-file
  insight-type="shared"
  insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>

CSS 自定义属性

组件 mgt-file 定义以下 CSS 自定义属性。

<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>

.file {
  --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;
}

若要了解详细信息，请参阅设置组件样式。

Microsoft Graph API 和权限

此控件使用以下 Microsoft Graph API 和权限。对于每个 API 调用，需要列出的权限之一。

配置	权限范围	API
开发人员提供 `{drive-id}` AND `{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 /drive/{drive-id}/items/{item-id}
开发人员提供 `{drive-id}` AND `{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 /drive/{drive-id}/root：/{item-path}
开发人员提供 `{group-id}` AND `{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}
开发人员提供 `{group-id}` AND `{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}/drive/root：/{item-path}
开发人员仅提供 `{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}
开发人员仅提供 `{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}
开发人员提供 `{site-id}` AND `{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}
开发人员提供 `{site-id}` AND `{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}/drive/root：/{item-path}
开发人员提供 `{site-id}` AND `{list-id}` AND `{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}/lists/{list-id}/items/{item-id}/driveItem
开发人员提供 `{user-id}` AND `{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}
开发人员提供 `{user-id}` AND `{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}/drive/root：/{item-path}
`insight-type` 设置为 `trending` AND developer 提供 `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` 设置为 `used` AND developer 提供 `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` 是 `shared` AND 开发人员提供的 `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

模板

组件 mgt-file 支持多个模板，可用于替换组件的某些部分。若要指定模板，请在组件中包含元素 <template> ，并将设置为 data-type 以下值之一：

数据类型	数据上下文	说明
加载	无	组件处于加载状态时要呈现的模板。
no-data	无	在没有文件数据可用时要呈现的模板。
默认	文件：文件详细信息对象	默认模板将整个组件替换为你自己的组件。

模板用法示例

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
  <template data-type="default">
    <p>File name: {{file.name}}.</p>
    <p>File ID: {{file.id}}.</p>
  </template>
  <template data-type="loading">
    <p>Getting the file data...</p>
  </template>
  <template data-type="no-data">
    <p>No file data was found</p>
  </template>
</mgt-file>

身份验证

控件使用身份验证文档中所述的全局身份验证提供程序来提取所需的数据。

缓存

对象存储	缓存的数据	备注
`driveFiles`	按驱动器 ID 列出文件	在提供时 `driveId` 使用
`groupFiles`	按组 ID 列出文件	在提供时 `groupId` 使用
`siteFiles`	按站点 ID 列出文件	在提供时 `siteId` 使用
`userFiles`	按用户 ID 列出文件	在提供时 `userId` 使用
`insightFiles`	按见解列出文件	在提供和 `insightId` 时`insightType`使用
`fileQueries`	按查询列出文件	在提供时 `fileQuery` 使用

有关如何配置缓存的详细信息，请参阅缓存。

本地化

控件公开以下可本地化的变量。有关如何设置本地化的详细信息，请参阅本地化组件。

字符串名称	默认值
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

通过

Microsoft Graph 工具包中的文件组件

示例

属性

CSS 自定义属性

Microsoft Graph API 和权限

模板

模板用法示例

身份验证

缓存

本地化

反馈

其他资源