Del via

Elevation kontrol

  • Artikel

Et kontrolelement, der bruges til at oprette kort og pop op-menuer.

Kontrolelementet Elevation

Beskrivelse

Elevation bruges til at sætte fokus på en oplevelse og tilføje en fysisk væsentlighed til appen. Niveauer af forskellige niveauer er reserveret til elementer, der er tæt forbundet med lærredet eller visningen, f.eks. felter. Med flere niveauer kan du skabe en fremtrædende ramme rundt om overfladen, hvor der fokuseres kraftigt på alt det, der kan opleves, f.eks. dialoger. Understøtter musemarkørhændelser.

Gå til Fluent UI Elevation-stil-siden for bedste praksis.

Egenskaber

Nøgleegenskaber

Egenskab Beskrivelse
Depth Dybden af skyggen.
HoverDepth Dybden i skyggen, der vises på markøren.

Egenskaber for typografi

Egenskab Beskrivelse
FillColor Baggrundsfarve af kontrolelementet Elevation.
HoverFillColor Farven på baggrunden i kontrolelementet Elevation, der vises på markøren.
PaddingLeft Venstre kantgab mellem kort og kontrolgrænse
PaddingRight Højre kantgab mellem kort og kontrolgrænse
PaddingTop Øverste kantgab mellem kort og kontrolgrænse
PaddingBottom Nederste kantgab mellem kort og kontrolgrænse
DarkOverlay Når aktiveret vises en mørk overlejringseffekt i det udfyldte område.

Formatering af indhold over Elevation med layoutbeholdere

  1. Føj et Container-kontrolelement til skærmbilledet (hverken Horizontal container eller Vertical container).

  2. Tilføje en Elevation-komponent i beholderen

  3. Angiv Elevation-egenskaber, så de passer til den overordnede Container:

    Egenskab Værdi
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Angiv egenskaberne PaddingRight, PaddingTop og PaddingBottom til Self.PaddingLeft

  5. Vælg den ønskede Depth-værdi, og juster værdien PaddingLeft for at give et tilstrækkeligt mellemrum, til at du ikke kan afskære den.

  6. Indsæt en Vertical container i samme overordnede Container. Det bruges som vært for kortets indhold.

  7. Indstil Vertical container-egenskaberne til at justere sig visuelt i forhold til Elevation-komponentens overensstemmelse:

    Egenskab Værdi
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Tilføj indhold i Vertical container for at udfylde kortet.

Elevationseksempel.

Begrænsninger

Denne kodekomponent kan kun bruges i lærredapps og brugerdefinerede sider.