Para fazer componente no Microsoft Graph Toolkit
O componente To Do é usado para permitir que o usuário conectado exiba, adicione, remova, conclua e/ou edite tarefas da Microsoft Para Fazer usando a API De Fazer no Microsoft Graph.
Exemplo
O exemplo a seguir exibe as tarefas Microsoft To Do do usuário conectado usando o mgt-todo
componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.
Propriedades
Você pode usar os seguintes atributos e propriedades para personalizar o componente.
Atributo | Propriedade | Descrição |
---|---|---|
somente leitura | Readonly | Um booliano para definir a interface da tarefa a ser lida apenas (sem adicionar ou remover tarefas). O padrão é false . |
hide-header | hideHeader | Um booliano para mostrar ou ocultar o cabeçalho do componente. O padrão é false . |
ocultar opções | hideOptions | Um booliano para mostrar ou ocultar as opções em tarefas. O padrão é false . |
initial-id="folder_id" | initialId | Uma ID de cadeia de caracteres para definir a pasta exibida inicialmente para a ID fornecida. |
target-id="folder_id" | Targetid | Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID da pasta fornecida. |
N/D | isNewTaskVisible | Determina se o novo modo de exibição de tarefas está visível na renderização. |
N/D | taskFilter | Uma função opcional para filtrar quais tarefas são mostradas ao usuário. |
O exemplo a seguir mostra apenas tarefas da pasta com a ID 12345 e não permite que o usuário crie novas tarefas.
<mgt-todo read-only initial-id="12345"></mgt-todo>
Variáveis CSS personalizadas
O mgt-todo
componente define as seguintes propriedades personalizadas do 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;
}
Para saber mais, confira componentes de estilo.
Eventos
Os eventos a seguir são disparados do componente.
Evento | Quando ele é emitido | Dados personalizados | Cancelável | Bolhas | Funciona com modelo personalizado |
---|---|---|---|---|---|
taskClick |
Dispara quando o usuário clica ou toca em uma tarefa | Tarefa selecionada | Não | Não | Não |
Para obter mais informações sobre como lidar com eventos, consulte eventos.
Modelos
O todo
componente dá suporte a vários modelos que permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template>
elemento dentro de um componente e defina o data-type
como um dos valores a seguir.
Tipo de dados | Contexto de dados | Descrição |
---|---|---|
tarefa | tarefa: um objeto de tarefa Para Fazer | Substitui toda a tarefa padrão. |
detalhes da tarefa | tarefa: um objeto de tarefa Para Fazer | O modelo substitui a seção de detalhes da tarefa. |
O exemplo a seguir define um modelo para o componente tarefas.
<mgt-todo>
<template data-type="task-details">
<div>
Importance Level: {{task.importance}}
</div>
</template>
</mgt-todo>
Permissões do Microsoft Graph
Esse controle usa as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.
Configuração | Permissão | API |
---|---|---|
targetId ou initialId definir |
Tasks.Read, Tasks.ReadWrite | /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks |
targetId não definido |
Tasks.Read, Tasks.ReadWrite | /me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks |
criar, atualizar ou excluir tarefa | Tasks.ReadWrite | /me/todo/lists/{todoTaskListId}/tasks/{taskId} |
Autenticação
O componente todo usa o provedor de autenticação global descrito na documentação de autenticação.
Cache
O mgt-todo
componente não armazena em cache nenhum dado.
Localização
O controle expõe as variáveis a seguir que podem ser localizadas. Para obter mais informações, confira Localizando componentes.
Nome da cadeia de caracteres | Valor padrão |
---|---|
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 |
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de