Partilhar via

Elevation Controlo

  • Artigo

Um controlo utilizado para criar menus de cartões e de opções.

Controlo Elevation.

Description

Elevation é usado para chamar a atenção para uma experiência e adicionar uma materialidade física ao aplicativo. Os níveis menos profundos estão reservados para itens que estão ligados de forma mais próxima tela ou vista, como mosaicos. Os níveis mais profundos criam uma moldura importante à volta da surface, concentrando foco concentrado em experiências auto-contidas, como diálogos. Suporta eventos de pairar o cursor.

Aceda à página Estilo Elevation da Fluent UI para ver melhores práticas.

_Propriedades

Propriedades chave

Property Description
Depth A profundidade da sombra.
HoverDepth A profundidade da sombra que aparece quando paira o cursor.

Propriedades de estilo

Property Description
FillColor O fundo do cor de fundo do controlo Elevation.
HoverFillColor A cor do fundo do controlo Elevation que aparece quando paira o cursor.
PaddingLeft Contorno esquerdo entre o cartão e o limite do controlo
PaddingRight Contorno direito entre o cartão e o limite do controlo
PaddingTop Contorno superior entre o cartão e o limite do controlo
PaddingBottom Contorno inferior entre o cartão e o limite do controlo
DarkOverlay Quando ativado, apresenta um efeito de sobreposição escura na área de preenchimento.

Conteúdo de formatação sobre Elevation com contentores de esquema

  1. Adicione um controlo Container ao ecrã (não Horizontal container ou Vertical container).

  2. Adicionar um componente Elevation ao contentor

  3. Defina as propriedades de Elevation para se adequarem ao respetivo Container principal:

    Property valor
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Defina as propriedades de PaddingRight, PaddingTop e PaddingBottom para referenciarem Self.PaddingLeft

  5. Escolha Depth pretendido e ajuste o valor de PaddingLeft para fornecer um intervalo suficiente para que a sombra não seja cortada.

  6. Introduza um Vertical container no mesmo Container principal. Este valor é utilizado para hospedar o conteúdo do cartão.

  7. Defina as propriedades de Vertical container para alinhar visualmente com os contornos da Elevation do componente:

    Property valor
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

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

Exemplo de Elevation.

Limitações

Este componente de código só pode ser utilizado em aplicações de tela e páginas personalizadas.