Compartilhar via

Elevation controlar

  • Artigo

Um controle usado para construir cartões e submenus.

Controle Elevation.

Description

Elevation é usado para chamar a atenção para uma experiência e adicionar uma materialidade física ao aplicativo. Níveis rasos são reservados para itens que estão intimamente conectados à tela ou exibição, como blocos. Níveis mais profundos criam uma moldura proeminente ao redor da superfície, atraindo um forte foco para experiências independentes, como diálogos. Oferece suporte a eventos de foco do mouse.

Acesse a página de estilo Fluent UI Elevation para conhecer as melhores práticas.

Propriedades

Principais propriedades

Propriedade Description
Depth A profundidade da sombra.
HoverDepth A profundidade da sombra que aparece ao passar o mouse.

Propriedades de estilo

Propriedade Description
FillColor A cor de fundo do controle Elevation.
HoverFillColor A cor de fundo do controle Elevation que aparece ao passar o mouse.
PaddingLeft Espaço da borda esquerda entre o cartão e o limite de controle
PaddingRight Espaço da borda direita entre o cartão e o limite de controle
PaddingTop Espaço da borda superior entre o cartão e o limite de controle
PaddingBottom Espaço da borda inferior entre o cartão e o limite de controle
DarkOverlay Quando habilitada, exibe um efeito de sobreposição escura na área preenchida.

Formatação de conteúdo sobre Elevation com contêineres de layout

  1. Adicione um controle Container à tela (não Horizontal container ou `Vertical container).

  2. Adicionar um componente Elevation no contêiner

  3. Defina as propriedades Elevation para caber no pai Container:

    Propriedade Valor
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Defina as propriedades PaddingRight, PaddingTop e PaddingBottom para fazer referência a Self.PaddingLeft

  5. Escolha a Depth desejada e ajuste o valor de PaddingLeft para fornecer espaço suficiente para que a sombra não seja cortada.

  6. Insira um Vertical container no mesmo pai Container. Isso é usado para hospedar o conteúdo do cartão.

  7. Defina as propriedades do Vertical container para alinhar visualmente às bordas do componente Elevation:

    Propriedade Valor
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Adicione conteúdo ao Vertical container para preencher o cartão.

Exemplo de Elevation

Limitações

Esse componente de código só pode ser usado em aplicativos de tela e páginas personalizadas.