Dela via

Elevation kontroll

  • Artikel

En kontroll som används för att skapa utfällbara menyer.

Elevation-kontroll.

Description

Elevation används för att dra fokus till en upplevelse och lägga till en fysisk materialitet i appen. Grunda nivåer är reserverade för föremål som är nära kopplade till arbetsytan eller vyn, till exempel paneler. Djupare nivåer skapar en framstående ram runt ytan, vilket ger starkt fokus till fristående erfarenheter som dialoger. Stöd för muspekare.

Gå till sidan Fluent UI höjd stil för metodtips.

Egenskaper

Nyckelegenskaper

Property Description
Depth Skuggans djup.
HoverDepth Skuggdjupet som visas vid hovring.

Stilegenskaper

Property Description
FillColor Bakgrundsfärgen för Elevation-kontrollen.
HoverFillColor Bakgrundsfärg på kontrollen Elevation som visas vid hovring.
PaddingLeft Vänsterkanten mellan kort och kontrollgräns
PaddingRight Högerkanten mellan kort och kontrollgräns
PaddingTop Översta kanten mellan kort och kontrollgräns
PaddingBottom Nedre kanten mellan kort och kontrollgräns
DarkOverlay Visar en mörk överläggseffekt i det utfyllda området om aktiverad.

Formatera innehåll över Elevation med layoutbehållare

  1. Lägg till Container kontrollen på skärmen (inte Horizontal container eller Vertical container).

  2. Lägga till en Elevation komponent i behållare

  3. Ange Elevation egenskaper så att de passar överordnat Container:

    Property Värde
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Ange PaddingRight, PaddingTop och PaddingBottom egenskaper till referens Self.PaddingLeft

  5. Välj önskat Depth och justera värdet för att PaddingLeft få tillräckligt med tid för att inte bli avskuret.

  6. Infoga en Vertical container i samma överordnade Container. Används som värd för innehållet på kortet.

  7. Ange egenskaperna Vertical container så att de justeras visuellt mot Elevation komponentens kant:

    Property Värde
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Lägg till innehåll i Vertical container så att kortet fylls i.

Exempel på elevation.

Begränsningar

Den här kodkomponenten kan endast användas i arbetsyteappar och anpassade sidor.