Partager via

Elevation contrôle

  • Article

Un contrôle utilisé pour créer des cartes et des menus volants.

Contrôle Elevation.

Description

Elevation est utilisé pour attirer l’attention sur une expérience et ajouter une matérialité physique à l’application. Les niveaux peu profonds sont réservés aux éléments étroitement liés au canevas ou à la vue, tels que les vignettes. Les niveaux plus profonds créent un cadre proéminent autour de la surface, ce qui attire l’attention sur les expériences autonomes comme les dialogues. Prend en charge les événements de survol de la souris.

Accédez à la page Style Elevation de Fluent UI pour connaître les bonnes pratiques.

Propriétés

Propriétés principales

Property Description
Depth Profondeur de l’ombre.
HoverDepth Profondeur de l’ombre qui apparaît au survol.

Propriétés du style

Property Description
FillColor Couleur d’arrière-plan du contrôle Elevation.
HoverFillColor Couleur de l’arrière-plan du contrôle Elevation qui apparaît au survol.
PaddingLeft Écart du bord gauche entre la carte et la limite du contrôle
PaddingRight Écart du bord droit entre la carte et la limite du contrôle
PaddingTop Écart du bord supérieur entre la carte et la limite du contrôle
PaddingBottom Écart du bord inférieur entre la carte et la limite du contrôle
DarkOverlay Quand il est activé, affiche un effet de superposition sombre dans la zone de marge.

Mise en forme du contenu avec Elevation avec des conteneurs de mise en page

  1. Ajoutez un contrôle Container à l’écran (pas un Horizontal container ni un Vertical container).

  2. Ajouter un composant Elevation dans le conteneur

  3. Définissez les propriétés Elevation pour s’adapter à son Container parent :

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

  4. Définissez les propriétés PaddingRight, PaddingTop et PaddingBottom pour qu’elles fassent référence à Self.PaddingLeft

  5. Choisissez la profondeur Depth souhaitez et ajustez la valeur de PaddingLeft pour maintenir un écart suffisant pour que l’ombre ne soit pas coupée.

  6. Insérez un Vertical container dans le même Container parent. Ceci est utilisé pour héberger le contenu de la carte.

  7. Définissez les propriétés Vertical container pour s’aligner visuellement sur les bords du composant Elevation :

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

  8. Ajoutez du contenu dans le Vertical container pour remplir la carte.

Exemple de contrôle Elevation.

Limitations

Ce composant de code ne peut être utilisé que dans les applications canevas et les pages personnalisées.