Tornar os elementos reativos ao pairar.

Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design

Faça um elemento mudar quando um visitante aponta para ele: uma caixa que levanta, um botão que escurece, uma imagem que clareia. Define o aspeto de repouso no painel Style e o aspeto ao pairar no gémeo, o painel Hover style. O exemplo constrói uma caixa de texto cinzenta que levanta ao pairar.

O vídeo dá a uma caixa de texto um fundo, enchimento e uma sombra que aprofunda ao pairar.

Construir a caixa de texto

  1. Clique em + na área de conteúdo e escolha Section no separador Layout.
  2. Clique em + na secção e escolha Row.
  3. Clique no ícone de grelha na linha, escolha o mosaico com três colunas iguais e clique em Save.
  4. Clique em + na primeira coluna e escolha Text no separador Content.
  5. Escreva "Open day", defina como Heading 3 e adicione uma linha abaixo.

Definir o estilo de repouso

  1. No mesmo diálogo de definições, abra o painel Style.
  2. Escolha um Background cinzento claro.
  3. No modelo de caixa, defina os lados superior, esquerdo e inferior de Padding como 24.
  4. Defina Border radius como 8.
  5. Defina Drop shadow como 1.

Definir o estilo ao pairar

  1. Abra o painel Hover style.
  2. Defina Drop shadow como 4.
  3. Clique em Save.
  4. Clique em Save na barra de ferramentas do DXPR Builder.
  5. Abra o menu de vista, o ícone de olho na barra de ferramentas, e escolha Preview.
  6. Mova o ponteiro para cima da caixa de texto.

O que vê

Em repouso, a caixa de texto é cinzenta com cantos arredondados e uma sombra leve. Quando o ponteiro a alcança, a sombra aprofunda e a caixa parece levantar; quando o ponteiro sai, assenta de volta. A mudança de sombra é animada. Outras mudanças ao pairar, como uma cor nova, trocam de imediato.

Definições

O painel Hover style tem os mesmos campos do painel Style. Um campo deixado vazio mantém o valor de repouso.

Field Use on hover
Margin, Border, Padding (modelo de caixa) Deslocar, emoldurar ou aumentar o elemento
Font color Destacar texto
Border color Enfatizar a borda
Background Mudar o preenchimento
Background image, Background style, Background position Trocar ou mover a imagem
Border style Mostrar uma borda
Font size Ampliar o texto
Border radius Arredondar os cantos
Opacity Revelar ou esbater o elemento
Drop shadow Dar profundidade, de 1 a 5

Padrões comuns

  • Card lift: Drop shadow 1 em Style, 4 em Hover style.
  • Picture reveal: Opacity 0.7 em Style, 1 em Hover style.
  • Button colour change: um Background mais escuro em Hover style.
  • Border highlight: Border style Solid com um Border color claro em Style, um Border color de destaque em Hover style.

Se o efeito não aparece

  • The text box does not change when you point at it. O valor ao pairar é igual ao valor de repouso, ou definiu-o no painel Style por engano. Abra More > Settings e aumente Drop shadow no painel Hover style.
  • The effect is hard to judge while you edit. No modo de edição, o elemento também mostra a barra de controlos e o contorno quando aponta para ele. Escolha Preview no menu de vista e aponte outra vez.
  • Opacity, Font size or Border radius set to 0 has no effect. Um valor de 0 conta como não definido para estes três campos. Para esbater um elemento quase por completo, use um Opacity de 0.01.

O que se segue?