Del via

Elevation kontroll

  • Artikkel

En kontroll som brukes til å konstruere kort og undermenyer.

Elevation-kontroll.

Bekrivelse

Elevation brukes til å trekke fokus til en opplevelse og legge til en fysisk materialitet i appen. Grunne nivåer er reservert for elementer som er nært knyttet til arbeidsområdet eller visningen, for eksempel fliser. Dypere nivåer gir en fremtredende ramme rundt flaten, og setter fokus på selvstendige erfaringer, for eksempel dialoger. Støtter hendelser for musepekeren.

Gå til siden Fluent UI Elevation-stil for beste fremgangsmåter.

Egenskaper

Nøkkelegenskaper

Egenskap Bekrivelse
Depth Dybden i skyggen.
HoverDepth Dybden på skyggen som vises når du holder markøren.

Stilegenskaper

Egenskap Bekrivelse
FillColor Bakgrunnsfargen på Elevation-kontrollen.
HoverFillColor Bakgrunnsfargen på Elevation-kontrollen som vises når du holder markøren.
PaddingLeft Venstre kant-skille mellom kort og kontrollgrense
PaddingRight Høyre kant-skille mellom kort og kontrollgrense
PaddingTop Øverste kant-skille mellom kort og kontrollgrense
PaddingBottom Nederste kant-skille mellom kort og kontrollgrense
DarkOverlay Når aktivert, viser en mørk overlappingseffekt i det utfylte området.

Formatere innhold over Elevation med oppsettbeholdere

  1. Legg til en Container-kontroll i skjermen (ikke Horizontal container eller Vertical container).

  2. Legge til en Elevation-komponent i beholderen

  3. Angi Elevation-egenskaper som passer til den overordnede Container:

    Egenskap Verdi
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Angi egenskaper for PaddingRight, PaddingTop og PaddingBottom for referansen Self.PaddingLeft

  5. Velg ønsket Depth, og juster verdien av PaddingLeft for å gi nok rom til at skyggen ikke blir avskjært.

  6. Sett inn Vertical container i samme overordnede Container. Dette brukes til å drifte innholdet på kortet.

  7. Angi at Vertical container-egenskaper skal justeres visuelt i Elevation-komponentkantene:

    Egenskap Verdi
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Legg til innhold i Vertical container for å fylle ut kortet.

Elevation-eksempel.

Begrensninger

Denne kodekomponenten kan bare brukes i lerretsapper og egendefinerte sider.