Componente tarefas pendentes no Microsoft Graph ToolkitTo Do component in the Microsoft Graph Toolkit

O componente tarefas pendentes é usado para permitir que o usuário conectado exiba, adicione, remova, conclua e/ou edite tarefas da Microsoft para usar a API tarefas pendentes no Microsoft Graph.The To Do component is used to enable the signed-in user to view, add, remove, complete, and/or edit tasks from Microsoft To Do using the To Do API in Microsoft Graph.

ExemploExample

O exemplo a seguir exibe as tarefas do usuário conectado da Microsoft usando o mgt-todo componente.The following example displays the signed-in user's Microsoft To Do tasks using the mgt-todo component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.

Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev

PropriedadesProperties

Você pode usar os seguintes atributos e propriedades para personalizar o componente.You can use the following attributes and properties to customize the component.

AtributoAttribute PropriedadeProperty DescriçãoDescription
somente leituraread-only readOnlyreadOnly Um booliano para definir a interface de tarefa como somente leitura (sem adicionar ou remover tarefas).A Boolean to set the task interface to be read only (no adding or removing tasks). O padrão é false.Default is false.
Ocultar-cabeçalhohide-header hideHeaderhideHeader Um booliano para mostrar ou ocultar o cabeçalho do componente.A Boolean to show or hide the header of the component. O padrão é false.Default is false.
Hide-opçõeshide-options hideoptionshideOptions Um booliano para mostrar ou ocultar as opções nas tarefas.A Boolean to show or hide the options in tasks. O padrão é false.Default is false.
Initial-ID = "folder_id"initial-id="folder_id" initialidinitialId Uma ID de cadeia de caracteres para definir a pasta exibida inicialmente com a ID fornecida.A string ID to set the initially displayed folder to the provided ID.
Target-ID = "folder_id"target-id="folder_id" targetIdtargetId Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID de pasta fornecida.A string ID to lock the tasks interface to the provided folder ID.
N/DN/A isNewTaskVisibleisNewTaskVisible Determina se a exibição de nova tarefa é visível no processamento.Determines whether new task view is visible at render.
N/DN/A taskFiltertaskFilter Uma função opcional para filtrar quais tarefas são exibidas para o usuário.An optional function to filter which tasks are shown to the user.

O exemplo a seguir mostra apenas as tarefas da pasta com a ID 12345 e não permite que o usuário crie novas tarefas.The following example shows only tasks from the folder with ID 12345 and does not allow the user to create new tasks.

<mgt-todo read-only initial-id="12345"></mgt-todo>

Variáveis CSS personalizadasCustom CSS variables

O mgt-todo componente define as seguintes propriedades personalizadas de CSS.The mgt-todo component defines the following CSS custom properties.

mgt-todo {
  --tasks-background-color
  --tasks-header-padding
  --tasks-title-padding
  --tasks-plan-title-font-size
  --tasks-plan-title-padding

  --tasks-new-button-width
  --tasks-new-button-height
  --tasks-new-button-color
  --tasks-new-button-background
  --tasks-new-button-border
  --tasks-new-button-hover-background
  --tasks-new-button-active-background

  --task-margin
  --task-background
  --task-border
  --task-header-color
  --task-header-margin

  --task-new-margin
  --task-new-border
  --task-new-input-margin
  --task-new-input-padding
  --task-new-input-font-size
  --task-new-select-border

  --task-new-add-button-background
  --task-new-add-button-disabled-background
  --task-new-cancel-button-color

  --task-complete-background
  --task-complete-border

  --task-icon-alignment: flex-start (default) | center | flex-end
  --task-icon-background
  --task-icon-background-completed
  --task-icon-border
  --task-icon-border-completed
  --task-icon-border-radius
  --task-icon-color
  --task-icon-color-completed
}

Para saber mais, confira estilos de componentes.To learn more, see styling components.

EventosEvents

Os eventos a seguir são acionados do componente.The following events are fired from the component.

EventoEvent DetalheDetail DescriçãoDescription
taskAddedtaskAdded O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando uma nova tarefa é criada.Fires when a new task has been created.
taskchangedtaskChanged O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando os metadados da tarefa são alterados, como marcação concluída.Fires when task metadata has been changed, such as marking completed.
taskClicktaskClick O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando o usuário clica ou toca em uma tarefa.Fires when the user clicks or taps on a task.
taskRemovedtaskRemoved O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando uma tarefa existente foi excluída.Fires when an existing task has been deleted.

ModelosTemplates

O tasks componente oferece suporte a vários modelos que permitem substituir determinadas partes do componente.The tasks component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos seguintes.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
tarefatask tarefa: um objeto de tarefa tarefas pendentestask: a to-do task object Substitui toda a tarefa padrão.Replaces the whole default task.
tarefa-detalhestask-details tarefa: um objeto de tarefa tarefas pendentestask: a to-do task object O modelo substitui a seção de detalhes da tarefa.Template replaces the details section of the task.

O exemplo a seguir define um modelo para o componente tarefas.The following example defines a template for the tasks component.

<mgt-todo>
    <template data-type="task-details">
        <div>
            Importance Level: {{task.importance}}
        </div>
    </template>
</mgt-todo>

Permissões do Microsoft GraphMicrosoft Graph permissions

Este controle usa as seguintes APIs e permissões do Microsoft Graph.This control uses the following Microsoft Graph APIs and permissions.

RecursoResource PermissãoPermission
/me/todo/lists//me/todo/lists/ Tasks.ReadWriteTasks.ReadWrite
/me/todo/lists/{todoTaskListId}/tasks/me/todo/lists/{todoTaskListId}/tasks Tasks.ReadWriteTasks.ReadWrite
/me/todo/lists/{todoTaskListId}/tasks/{taskId}/me/todo/lists/{todoTaskListId}/tasks/{taskId} Tasks.ReadWriteTasks.ReadWrite

AutenticaçãoAuthentication

O componente tarefas usa o provedor de autenticação global descrito na documentação de autenticação.The tasks component uses the global authentication provider described in the authentication documentation.