Microsoft Graph 工具包中的“要执行”组件

  • 项目

To Do 组件用于使登录用户能够使用 Microsoft Graph 中的 To Do API 查看、添加、删除、完成和/或编辑 Microsoft To Do 中的任务。

示例

以下示例使用 mgt-todo 组件显示已登录用户的 Microsoft To Do 任务。 可以使用代码编辑器来查看 属性 如何更改组件的行为。

属性

可以使用以下属性和属性来自定义组件。

属性 属性 说明
只读 readOnly 一个布尔值，用于将任务接口设置为只读 (不添加或删除任务) 。 默认值为“false”。
hide-header hideHeader 一个布尔值，用于显示或隐藏组件的标头。 默认值为“false”。
hide-options hideOptions 一个布尔值，用于显示或隐藏任务中的选项。 默认值为“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>

自定义 CSS 变量

组件 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 权限

此控件使用以下 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