培训
模块
使用属性和 CSS 配置 Microsoft Graph 工具包组件并为其设置样式 - Training
Microsoft Graph 工具包组件可以灵活地进行自定义。 可以通过使用属性更改组件的行为。 还可以通过使用 CSS 自定义属性来自定义组件样式,以匹配应用的品牌。
To Do 组件用于使已登录用户能够使用 Microsoft Graph 中的 To Do API 查看、添加、删除、完成和/或编辑 Microsoft To Do 中的任务。
以下示例使用 组件显示已登录用户的“Microsoft要执行”任务 mgt-todo
。 可以使用代码编辑器来查看 属性 如何更改组件的行为。
可以使用以下属性和属性来自定义组件。
属性 | 属性 | 说明 |
---|---|---|
只读 | readOnly | 一个布尔值,用于将任务接口设置为只读 (不添加或删除任务) 。 默认值为“false ”。 |
initial-id=“folder_id” | initialId | 用于将最初显示的文件夹设置为提供的 ID 的字符串 ID。 |
target-id=“folder_id” | targetId | 用于将任务接口锁定为提供的文件夹 ID 的字符串 ID。 |
不适用 | isNewTaskVisible | 确定新的任务视图在呈现时是否可见。 |
不适用 | taskFilter | 一个可选函数,用于筛选向用户显示的任务。 |
以下示例仅显示 ID 为 12345 的文件夹中的任务,不允许用户创建新任务。
<mgt-todo read-only initial-id="12345"></mgt-todo>
组件 mgt-todo
定义以下 CSS 自定义属性。
<mgt-todo class="todo"></mgt-todo>
.todo {
--task-new-cancel-button-color: blue;
--task-detail-color: purple;
--task-color: black;
--task-background-color: white;
--task-complete-background-color: grey;
--task-date-input-active-color: blue;
--task-date-input-hover-color: green;
--task-background-color-hover: grey;
--task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
--task-border: 1px solid black;
--task-border-completed: 1px solid grey;
--task-radio-background-color: green;
}
若要了解详细信息,请参阅 设置组件样式。
从 组件触发以下事件。
事件 | 何时发出 | 自定义数据 | 可取消 | 泡沫 | 使用自定义模板 |
---|---|---|---|---|---|
taskClick |
当用户单击或点击任务时触发 | 所选 任务 | 否 | 否 | 否 |
有关处理事件的详细信息,请参阅 事件。
组件 todo
支持多个 模板 ,可用于替换组件的某些部分。 若要指定模板,请在组件中包含元素 <template>
,并将 设置为 data-type
以下值之一。
数据类型 | 数据上下文 | 说明 |
---|---|---|
task | 任务:To Do 任务对象 | 替换整个默认任务。 |
task-details | 任务:To Do 任务对象 | 模板替换任务的详细信息部分。 |
以下示例为任务组件定义模板。
<mgt-todo>
<template data-type="task-details">
<div>
Importance Level: {{task.importance}}
</div>
</template>
</mgt-todo>
此控件使用以下Microsoft Graph API 和权限。 对于每个调用的 API,用户必须至少具有列出的权限之一。
配置 | 权限 | API |
---|---|---|
targetId 或 initialId 设置 |
Tasks.Read、Tasks.ReadWrite | /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks |
targetId 未设置 |
Tasks.Read、Tasks.ReadWrite | /me/todo/lists、 /me/todo/lists/{todoTaskListId}/tasks |
创建、更新或删除任务 | Tasks.ReadWrite | /me/todo/lists/{todoTaskListId}/tasks/{taskId} |
待办事项组件使用 身份验证文档中所述的全局身份验证提供程序。
组件 mgt-todo
不缓存任何数据。
控件公开以下可本地化的变量。 有关详细信息,请参阅 本地化组件。
字符串名称 | 默认值 |
---|---|
cancelNewTaskSubtitle | Cancel |
newTaskPlaceholder | Add a task |
newTaskLabel | New Task Input |
addTaskButtonSubtitle | Add |
deleteTaskLabel | Delete Task |
dueDate | Due date |
newTaskDateInputLabel | New Task Date Input |
newTaskNameInputLabel | New Task Name Input |
cancelAddingTask | Cancel adding a new task |
培训
模块
使用属性和 CSS 配置 Microsoft Graph 工具包组件并为其设置样式 - Training
Microsoft Graph 工具包组件可以灵活地进行自定义。 可以通过使用属性更改组件的行为。 还可以通过使用 CSS 自定义属性来自定义组件样式,以匹配应用的品牌。