Componente de tareas pendientes en el kit de herramientas de Microsoft GraphTo Do component in the Microsoft Graph Toolkit

El componente de tareas pendientes se usa para permitir que el usuario que ha iniciado sesión pueda ver, agregar, quitar, completar o editar tareas de Microsoft con la API de tareas pendientes de 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.

EjemploExample

En el siguiente ejemplo se muestra que Microsoft realiza tareas con el componente en el usuario que ha iniciado sesión mgt-todo .The following example displays the signed-in user's Microsoft To Do tasks using the mgt-todo component. Puede usar el editor de código para ver cómo las propiedades cambian el comportamiento del componente.You can use the code editor to see how properties change the behavior of the component.

Abra este ejemplo en manits. devOpen this example in mgt.dev

PropiedadesProperties

Puede usar los siguientes atributos y propiedades para personalizar el componente.You can use the following attributes and properties to customize the component.

AtributoAttribute PropiedadProperty DescriptionDescription
solo lecturaread-only LecturareadOnly Un valor booleano que permite configurar la interfaz de tareas para que sea de sólo lectura (sin agregar ni quitar tareas).A Boolean to set the task interface to be read only (no adding or removing tasks). El valor predeterminado es false.Default is false.
Hide-headerhide-header hideHeaderhideHeader Un valor booleano que muestra u oculta el encabezado del componente.A Boolean to show or hide the header of the component. El valor predeterminado es false.Default is false.
Ocultar-opcioneshide-options hideOptionshideOptions Un valor booleano que muestra u oculta las opciones de las tareas.A Boolean to show or hide the options in tasks. El valor predeterminado es false.Default is false.
Initial-ID = "folder_id"initial-id="folder_id" initialIdinitialId Un identificador de cadena para establecer la carpeta que se muestra inicialmente en el identificador proporcionado.A string ID to set the initially displayed folder to the provided ID.
target-ID = "folder_id"target-id="folder_id" targetIdtargetId Un identificador de cadena para bloquear la interfaz de tareas con el identificador de carpeta proporcionado.A string ID to lock the tasks interface to the provided folder ID.
N/DN/A isNewTaskVisibleisNewTaskVisible Determina si la nueva vista de tareas está visible en la representación.Determines whether new task view is visible at render.
N/DN/A taskFiltertaskFilter Una función opcional para filtrar las tareas que se muestran al usuario.An optional function to filter which tasks are shown to the user.

El siguiente ejemplo muestra solo las tareas de la carpeta con el identificador 12345 y no permite al usuario crear nuevas tareas.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>

Variables CSS personalizadasCustom CSS variables

El mgt-todo componente define las siguientes propiedades personalizadas 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 obtener más información, consulte estilos de componentes.To learn more, see styling components.

EventosEvents

Los siguientes eventos se desencadenan desde el componente.The following events are fired from the component.

EventoEvent DetallesDetail DescriptionDescription
taskAddedtaskAdded El detalle contiene el objeto respectivo taskThe detail contains the respective task object Se desencadena cuando se ha creado una nueva tarea.Fires when a new task has been created.
taskChangedtaskChanged El detalle contiene el objeto respectivo taskThe detail contains the respective task object Se desencadena cuando se han cambiado los metadatos de la tarea, como el marcado completado.Fires when task metadata has been changed, such as marking completed.
taskClicktaskClick El detalle contiene el objeto respectivo taskThe detail contains the respective task object Se desencadena cuando el usuario hace clic o pulsa una tarea.Fires when the user clicks or taps on a task.
taskRemovedtaskRemoved El detalle contiene el objeto respectivo taskThe detail contains the respective task object Se desencadena cuando se ha eliminado una tarea existente.Fires when an existing task has been deleted.

PlantillasTemplates

El tasks componente admite varias plantillas que permiten reemplazar algunas partes del componente.The tasks component supports several templates that allow you to replace certain parts of the component. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los siguientes valores.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Tipo de datosData type Contexto de datosData context DescriptionDescription
tareatask tarea: un objeto Task de tareatask: a to-do task object Reemplaza toda la tarea predeterminada.Replaces the whole default task.
detalles de la tareatask-details tarea: un objeto Task de tareatask: a to-do task object Plantilla reemplaza la sección detalles de la tarea.Template replaces the details section of the task.

En el ejemplo siguiente se define una plantilla para el componente de tareas.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>

Permisos de Microsoft GraphMicrosoft Graph permissions

Este control usa las siguientes API y permisos de Microsoft Graph.This control uses the following Microsoft Graph APIs and permissions.

RecursoResource PermisoPermission
/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

AutenticaciónAuthentication

El componente de tareas utiliza el proveedor de autenticación global que se describe en la documentación de autenticación.The tasks component uses the global authentication provider described in the authentication documentation.