Elevation control

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

Description

Elevation Se utiliza para centrar la atención en una experiencia y añadir 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 o 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. Inserte 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.

Limitaciones

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