使用英语阅读

通过


Microsoft Graph 工具包中的文件组件

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

示例

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

属性

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

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

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

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

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

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

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

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

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

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

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

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

CSS 自定义属性

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

HTML
<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
css
.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-typeshared AND 开发人员提供的 {insight-id} Sites.Read.All、Sites.ReadWrite.All GET /me/insights/shared/{id}/resource

模板

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

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

模板用法示例

HTML
<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 按见解列出文件 在提供 和 insightIdinsightType使用
fileQueries 按查询列出文件 在提供 时 fileQuery 使用

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

本地化

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

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