Niveles del elemento web de SharePoint

Al diseñar un elemento web de SharePoint, a veces, debe tener un nivel de interacción secundario. Por ejemplo, un elemento de una lista o una foto individual de una galería. En este artículo se explica cómo usar barras de herramientas de estado secundarias, comandos predeterminados, escala y estados de interacción para seleccionar un elemento individual.

La configuración del elemento web y las barras de herramientas secundarias siguen los mismos modelos de elementos web de estado único, como el visor de una imagen o un archivo. Los elementos de segundo nivel puede tener sus propias barras de herramientas y panel de propiedades correspondiente, para que sea fácil para los autores configurar el elemento web con datos y contenido significativos. Tenga en cuenta que debe haber una clara separación entre las opciones de configuración de elementos web de dos niveles. Le recomendamos que mantenga la configuración de origen, filtrado y el diseño, así como las opciones adicionales que afectan al elemento web en su totalidad, en el primer nivel.

Estos son algunos ejemplos de elementos web para usar como referencia:

  • Galería de imágenes
  • Vínculos rápidos

Selección de una imagen individual en el elemento web de la Galería de imágenes con el panel de propiedades abierto

Barras de herramientas secundarias

Las barras de herramientas secundarias se usan en los elementos individuales de un diseño del elemento web que admiten la configuración a nivel de elemento en el panel de propiedades, y otros comandos como mover (para reorganizar los elementos en un diseño o para quitar/eliminar un elemento). También puede agregar comandos personalizados en esta barra de herramientas que se ajusten a las necesidades de su elemento web.

Estado de edición del elemento web de la Galería de imágenes con el panel de propiedades abierto

Estados de selección

Las barras de herramientas de segundo nivel dentro de un elemento web tienen tres comandos básicos: Editar, Mover y Quitar. Es importante tener en cuenta la implementación de los estados de selección al crear un elemento web con un nivel secundario.

La barra de herramientas de segundo nivel solo se mostrará cuando el autor selecciona (hace clic o pulsa) un elemento individual. No muestre todas las barras de herramientas de segundo nivel para todos los elementos a la vez, ya que estas pueden ser demasiadas para el usuario. Además, no deje que la barra de herramientas aparezca al pasar el cursor, ya que esto puede provocar problemas de uso con dispositivos compatibles con la función táctil.

El cuadro de límite o esquema de cada elemento de segundo nivel debe cambiar del estado predeterminado al color principal al pasar el cursor y seguir siendo el color principal en la selección. Es importante que el cuadro de límite y los iconos mantengan los estados activos para que el usuario entienda qué elemento se ha seleccionado al usar el panel de propiedades o mientras se estén reorganizando los elementos.

En el siguiente ejemplo se muestra un elemento individual de segundo nivel en el elemento web de la Galería de imágenes:

Editar nivel de elemento: abre el panel de propiedades con opciones de configuración específicas a nivel de elemento. Tenga en cuenta que el cuadro de límite se mantiene en el estado activo o seleccionado.

Mover: la transparencia del elemento baja al 65 % y una sombra paralela rodea el elemento.

Quitar: cuando se selecciona el icono Quitar X, se esconde la barra de herramientas, el elemento desvanece y se crea espacio para la redistribución del diseño específico.

Estados de selección de un elemento de segundo nivel, imagen individual de ejemplo en el elemento web de la Galería de imágenes

Paneles de propiedades

Los paneles de propiedades funcionan del mismo modo en el segundo nivel de elemento de un elemento web que al seleccionar primero el elemento web completo. El foco en el primer nivel cambia a la selección de segundo nivel y permite que el autor configure un elemento individual.

En el ejemplo siguiente, el primer nivel es el origen de la imagen y la configuración de diseño para el elemento web de la Galería de imágenes. Cuando el usuario selecciona una imagen individual, puede configurar el título, la leyenda y el texto alternativo en el panel de propiedades de segundo nivel.

Comparación del panel de propiedades entre el nivel 1 y 2

Vea también