Delen via

Elevation controle

  • Artikel

Een besturingselement dat wordt gebruikt om kaarten en flyout-menu's te maken.

Besturingselement Elevation.

Omschrijving

Elevation wordt gebruikt om de aandacht te vestigen op een ervaring en een fysieke materialiteit toe te voegen aan de app. Ondiepe niveaus zijn gereserveerd voor items die nauw verbonden zijn met het canvas of de weergave, zoals tegels. Diepere niveaus creëren een prominent kader rond het oppervlak, waardoor een sterke focus wordt gelegd op op zichzelf staande ervaringen zoals dialogen. Ondersteunt muisaanwijzergebeurtenissen.

Ga naar de pagina Elevation-stijl van Fluent UI voor best practices.

Eigenschappen

Belangrijke eigenschappen

Eigenschappen Omschrijving
Depth De diepte van de schaduw.
HoverDepth De diepte van de schaduw die verschijnt bij de muisaanwijzer.

Stijleigenschappen

Eigenschappen Omschrijving
FillColor De achtergrondkleur van het besturingselement Elevation.
HoverFillColor De achtergrondkleur van het besturingselement Elevation die verschijnt bij de muisaanwijzer.
PaddingLeft Linkerrandopening tussen kaart en grens van besturingselement
PaddingRight Rechterrandopening tussen kaart en grens van besturingselement
PaddingTop Bovenrandopening tussen kaart en grens van besturingselement
PaddingBottom Onderrandopening tussen kaart en grens van besturingselement
DarkOverlay Geeft indien ingeschakeld een donker overlay-effect weer in het uitgevulde gebied.

Inhoud opmaken via Elevation met indelingscontainers

  1. Voeg een Container-besturingselement aan het scherm toe (niet Horizontal container of Vertical container).

  2. Voeg een Elevation-onderdeel in de container toe

  3. Stel Elevation-eigenschappen in zodat ze passend zijn voor de bijbehorende bovenliggende Container:

    Eigenschappen Weergegeven als
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Stel de eigenschappen PaddingRight, PaddingTop en PaddingBottom zo in dat ze verwijzen naar Self.PaddingLeft

  5. Kies de gewenste Depth en pas de waarde van PaddingLeft aan om voldoende ruimte te bieden zodat de schaduw niet wordt afgesneden.

  6. Plaats een Vertical container in dezelfde bovenliggende Container. Dit wordt gebruikt om de inhoud van de kaart te hosten.

  7. Stel de Vertical container-eigenschappen in om deze visueel uit te lijnen met de randen van het Elevation-onderdeel:

    Eigenschappen Weergegeven als
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Voeg inhoud toe aan de Vertical container om de kaart te vullen.

Voorbeeld van Elevation.

Beperkingen

Dit codeonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.