Zdieľať cez

Ovládací prvok Elevation

  • Článok

Ovládací prvok používaný na vytváranie kariet a rozbaľovacích ponúk.

Kontrola nadmorskej výšky.

Description

Elevation sa používa na zameranie sa na prostredie a pridanie fyzickej podstaty do aplikácie. Plytké úrovne sú vyhradené pre položky, ktoré sú úzko spojené s plátnom alebo zobrazením, ako sú napríklad dlaždice. Hlbšie úrovne vytvárajú výrazný rám okolo povrchu a silno priťahujú na samostatné zážitky, ako sú dialógové okná. Podporuje udalosti po umiestnení myši.

Osvedčené postupy nájdete na stránke Štýl Fluent UI Elevation.

Vlastnosti

Vlastnosti kľúča

Vlastnosť Description
Depth Hĺbka tieňa.
HoverDepth Hĺbka tieňa, ktorá sa objaví pri umiestnení kurzora myši.

Vlastnosti štýlu

Vlastnosť Description
FillColor Farba pozadia ovládacieho prvku Elevation.
HoverFillColor Farba pozadia ovládacieho prvkuElevation, ktorý sa zobrazí po umiestnení kurzora myši.
PaddingLeft Medzera na ľavom okraji medzi kartou a hranicou ovládacieho prvku
PaddingRight Medzera na pravom okraji medzi kartou a hranicou ovládacieho prvku
PaddingTop Medzera na hornom okraji medzi kartou a hranicou ovládacieho prvku
PaddingBottom Medzera na dolnom okraji medzi kartou a hranicou ovládacieho prvku
DarkOverlay Keď je povolená, vo vyplnenej oblasti sa zobrazí efekt tmavého prekrytia.

Formátovanie obsahu nad Elevation s kontajnermi rozloženia

  1. Pridajte na obrazovku ovládací prvok Container (nie Horizontal container ani Vertical container).

  2. Do kontajnera pridajte komponent Elevation

  3. Nastavte vlastnosti Elevation tak, aby zodpovedali rodičovskej stránke Container:

    Vlastnosť Hodnota
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Vlastnosti PaddingRight, PaddingTop a PaddingBottom nastavte na referenčné Self.PaddingLeft.

  5. Vyberte požadovanú Depth a upravte hodnotu PaddingLeft, aby ste poskytli dostatočnú medzeru, aby tieň nebol odrezaný.

  6. Vložte Vertical container do rovnakého nadradeného Container. Používa sa na hosťovanie obsahu karty.

  7. Nastavte vlastnosti Vertical container tak, aby sa vizuálne zarovnali s okrajmi komponentu Elevation:

    Vlastnosť Hodnota
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Pridajte obsah do Vertical container na vyplnenie karty.

Príklad nadmorskej výšky.

Obmedzenia

Tento komponent kódu je možné použiť iba v aplikáciách plátna a vlastných stránkach.