Поділитися через

Elevation контроль

  • Стаття

Елемент керування використовується для побудови карток і спливаючих меню.

Контроль висоти.

Опис

Elevation використовується для того, щоб привернути увагу до досвіду та додати додатку фізичної матеріальності. Дрібні рівні зарезервовано для елементів, які тісно пов’язані з полотном або поданням, як-от плитки. Глибші рівні створюють видатну рамку навколо поверхні, привертаючи увагу до автономних інтерфейсів, як-от діалогові вікна. Підтримує події наведення курсору миші.

Для отримання рекомендацій перейдіть до сторінки Стиль Fluent UI Elevation.

Властивості

Ключові властивості

Властивість Опис
Depth Глибина тіні.
HoverDepth Глибина тіні, яка відображається під час наведення курсору миші.

Властивості стилю

Властивість Опис
FillColor Колір фону елемента керування Elevation.
HoverFillColor Колір фону елемента керування Elevation, який відображається під час наведення курсору миші.
PaddingLeft Лівий край зазору між карткою та межами елемента керування
PaddingRight Правий край зазору між карткою та межами елемента керування
PaddingTop Верхній край зазору між карткою та межами елемента керування
PaddingBottom Нижній край зазору між карткою та межами елемента керування
DarkOverlay Якщо ввімкнути цю функцію, відображається темний ефект накладання в області доповнення.

Форматування вмісту Elevation за допомогою контейнерів макета

  1. Додайте елемент Container на екран (без Horizontal container або Vertical container).

  2. Додавання компонента Elevation в контейнер

  3. Установіть властивості Elevation відповідно до батьківського Container.

    Властивість Значення
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Установіть властивості PaddingRight, PaddingTop і PaddingBottom для посилання на Self.PaddingLeft.

  5. Виберіть потрібний Depth і відкоригуйте значення PaddingLeft, щоб забезпечити достатній зазор для тіні, щоб її не було відрізано.

  6. Вставте Vertical container в той самий батьківський елемент Container. Використовується для розміщення вмісту картки.

  7. Установіть властивості Vertical container для візуального вирівнювання за краями компонента Elevation.

    Властивість Значення
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Додайте вміст до Vertical container, щоб заповнити картку.

Приклад висоти.

Обмеження

Цей компонент коду можна використовувати лише в компонованих програмах і настроюваних сторінках.