Share via

Ovládací prvek Elevation

  • Článek

Ovládací prvek používaný k vytváření karet a plovoucích nabídek.

Ovládací prvek Elevation.

Description

Elevation se používá k upoutání pozornosti na zážitek a přidání fyzické materiálnosti do aplikace. Mělké úrovně jsou vyhrazeny pro položky, které jsou úzce spojeny s plátnem nebo pohledem, jako jsou dlaždice. Hlubší úrovně vytvářejí výrazný rám kolem povrchu a přitahují silné zaměření na samostatné položky, jako jsou dialogová okna. Podporuje události při najetí myší.

Osvědčení postupy naleznete v části Styl Fluent UI Elevation.

Vlastnosti

Hlavní vlastnosti

Vlastnost Description
Depth Hloubka stínu.
HoverDepth Hloubka stínu, který se zobrazí při najetí myší.

Vlastnosti stylu

Vlastnost Description
FillColor Barva pozadí ovládacího prvku Elevation.
HoverFillColor Barva pozadí ovládacího prvku Elevation, která se zobrazí při najetí myší.
PaddingLeft Mezera na levém okraji mezi kartou a hranicí ovládacího prvku
PaddingRight Mezera na pravém okraji mezi kartou a hranicí ovládacího prvku
PaddingTop Mezera na horním okraji mezi kartou a hranicí ovládacího prvku
PaddingBottom Mezera na spodním okraji mezi kartou a hranicí ovládacího prvku
DarkOverlay Po aktivaci zobrazí efekt tmavého překrytí ve vnitřním okraji.

Přeformátování obsahu Elevation s kontejnery rozložení

  1. Přidejte na obrazovku ovládací prvek Container (ne Horizontal container ani Vertical container).

  2. Přidejte do komponenty Elevation kontejner

  3. Nastavte vlastnosti Elevation, aby odpovídaly nadřazenému prvku Container:

    Vlastnost Hodnota
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Nastavte vlastnosti PaddingRight, PaddingTop a PaddingBottom na Self.PaddingLeft reference

  5. Vyberte požadovanou hodnotu Depth a upravte hodnotu PaddingLeft, aby byl dostatek místa, aby stín nebyl odříznut.

  6. Vložte Vertical container do stejného nadřazeného prvku Container. To se používá k hostování obsahu karty.

  7. Nastavte vlastnosti Vertical container pro vizuální zarovnání s okraji položky Elevation:

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

  8. Přidejte obsah do Vertical container k naplnění karty.

Příklad Elevation.

Omezení

Tuto komponentu kódu lze použít pouze v aplikacích plátna a vlastních stránkách.