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

Elevation контроль

  • Статья

Элемент управления, используемый для построения карточек и всплывающих меню.

Элемент управления Elevation.

Description

Elevation используется для привлечения внимания к опыту и придания приложению физической материальности. Неглубокие уровни зарезервированы для элементов, тесно связанных с холстом или представлением, таких как плитки. Более глубокие уровни создают заметную рамку вокруг поверхности, привлекая сильное внимание к автономным элементам, таким как диалоги. Поддерживает события наведения мыши.

С рекомендациями можно ознакомиться на странице Стиль Fluent UI Elevation.

Свойства

Ключевые свойства

Свойство Description
Depth Глубина тени.
HoverDepth Глубина тени, которая появляется при наведении.

Свойства стиля

Свойство Description
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 для заполнения карточки.

Пример Elevation.

Ограничения

Этот компонент кода можно использовать только в приложениях на основе холста и настраиваемых страницах.