Compartir a través de

Control Elevation

Un control utilizado para construir tarjetas y menús de control flotante.

Control de elevación.

Descripción

Elevation se utiliza para llamar la atención sobre una experiencia y agregar una materialidad física a la aplicación. Los niveles poco profundos están reservados para los elementos que están estrechamente conectados con el lienzo o la vista, como los mosaicos. Los niveles más profundos crean un marco prominente alrededor de la superficie, atrayendo un fuerte enfoque a experiencias independientes como diálogos. Admite eventos de desplazamiento del mouse.

Vaya a la página Estilo de Elevation de Fluent UI para obtener prácticas recomendadas.

Propiedades

Propiedades importantes

Property Descripción
Depth Profundidad de la sombra.
HoverDepth Profundidad de la sombra que aparece al pasar el mouse.

Propiedades de estilo

Property Descripción
FillColor Color de fondo del control Elevation.
HoverFillColor Color de fondo del control Elevation que aparece al pasar el mouse.
PaddingLeft Espacio del borde izquierdo entre la tarjeta y el límite de control
PaddingRight Espacio del borde derecho entre la tarjeta y el límite de control
PaddingTop Espacio del borde superior entre la tarjeta y el límite de control
PaddingBottom Espacio del borde inferior entre la tarjeta y el límite de control
DarkOverlay Cuando está habilitado, muestra un efecto de superposición oscura en el área rellenada.

Dar formato al contenido Elevation con contenedores de diseño

  1. Agregue un control Container a la pantalla (no Horizontal container ni Vertical container).

  2. Añadir un componente Elevation en el contenedor

  3. Establezca las propiedades de Elevation para adaptarse a su Container principal:

    Property valor
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Establecer las propiedades PaddingRight, PaddingTop y PaddingBottom para hacer referencia a Self.PaddingLeft

  5. Elija el valor de Depth y ajuste el valor de PaddingLeft para proporcionar suficiente espacio para que la sombra no se corte.

  6. Introduzca un Vertical container en el mismo Container principal. Esto se utiliza para alojar el contenido de la tarjeta.

  7. Establezca las propiedades de Vertical container para alinear visualmente con los bordes del componente Elevation:

    Property valor
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Agregar contenidos en Vertical container para llenar la tarjeta.

Ejemplo de Elevation.

Limitaciones

Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.

  • Last updated on