通过

Elevation 控制

  • 项目

用于构造卡和弹出项目菜单的控件。

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 来填充卡。

Elevation 示例。

限制

此代码组件只能在画布应用和自定义页面中使用。