Configurações de layout

Largura

Pode diferir ligeiramente da interface real.

Ponto:
Define a largura do elemento; a combinação mínimo/máximo aumenta a estabilidade do Layout.

O que essa configuração altera: Particularmente importante para operações com comprimentos de sentença variáveis.

Dica de ajuste:
Se você definir primeiro a min-width e depois ajustar a width / max-width, é menos provável que haja falhas.

Itens de configuração.

• Usar largura: ativa/desativa a configuração de largura e a corrige somente se necessário.
• Width + Unidade (px / % / vw / vh / fit-content): defina a largura e o Unidade para ajustar a propagação de acordo com a quantidade de conteúdo.
• Usar largura minima / Min Width + Unidade: define a largura mínima e evita o esmagamento em frases curtas.
• Usar largura maxima / Max Width + Unidade: define a largura máxima e evita o alongamento horizontal excessivo em frases longas.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Notas: A seleção de fit-content para Unidade ajustará a largura de Botão para Automático para corresponder ao comprimento de Texto. A especificação % é uma relação com a largura do elemento pai; quando usada em conjunto com min/max, permite um Layout flexível, evitando flutuações extremas de largura.

Altura

Pode diferir ligeiramente da interface real.

Ponto:
Define o Altura do elemento, uma configuração que se alinha com a contagem de linhas e a decoração do Texto.

O que muda com essa configuração:
Um Altura insuficiente faz com que o elemento pareça apertado, enquanto um Altura excessivo faz com que pareça esticado.

Dica de ajuste:
Primeiro, decida sobre um Altura mínimo e só use o Altura fixo quando necessário para garantir a flexibilidade.

Opções de configuração.

• Usar altura: ativa/desativa a configuração do Altura e fixa somente quando necessário.
• Height + Unidade (px / % / vw / vh): defina Altura e Unidade para ajustar a sensação de densidade do elemento.
• Usar altura minima / Min Height + Unidade: define o Altura mínimo e garante uma área amigável ao toque.
• Usar altura maxima / Max Height + Unidade: define o Altura máximo e evita o espaçamento.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Nota: A fixação excessiva do Altura pode causar saliência se a quantidade de Texto for aumentada. Se for necessário um Altura fixo, é mais seguro usar min-height para que ele possa ser esticado de acordo com a quantidade de conteúdo. Recomenda-se um mínimo de 44px de Altura para a área de toque (WCAG Touch Target Guidelines).

O corpo do Botão, a área de conteúdo, o Miniatura, a banda e o Fundo têm um overflow: hidden de aplicar. Portanto, o conteúdo é cortado ao longo de Configurações de raio da borda. Observe que as Sombra grandes e as deformações que se sobressaem são cortadas por overflow: hidden (neon-01 / glow-01 em Animação de moldura são excepcionalmente alteradas para overflow: visible).

Margem

Pode diferir ligeiramente da interface real.

Point:
Define a margem externa do elemento. Esse é um item básico para projetar a distância entre os elementos dianteiro e traseiro.

O que essa configuração altera: Melhor design de margem melhora a coesão das informações e a orientação dos olhos.

Dica de ajuste:
Defina as regras verticais primeiro e, em seguida, aplicar para cada Botão, de modo que toda a página fique alinhada.

Configurações

• Usar configurações individuais: Permite ajuste detalhado com valores separados para cima, direita, baixo e esquerda.
• Geral: Margem + unidade (px / % / vw / vh / auto): aplica a mesma margem externa aos quatro lados.
• Individual: Margem superior / direita / inferior / esquerda + unidade: ajusta a distância de cada lado separadamente.
• Responsivo: ativa valores por dispositivo para evitar quebra de layout.

Notas: Use auto para habilitar o alinhamento do Centro na direção do Horizontal (por exemplo, Margin Left: auto + Margin Right: auto); use vw / vh no Margem do Unidade para especificar relativo à viewport Automático relativo a Automático e as margens serão ajustadas Automático de acordo com a largura da tela.

Preenchimento

Pode diferir ligeiramente da interface real.

Ponto:
Define a margem interna do elemento, eliminando a rigidez de Texto e ícone.

O que muda com essa configuração:
Também afeta diretamente a capacidade de prensagem (área da torneira).

Dica de ajuste:
O SP é particularmente propenso a margens verticais insuficientes, portanto, ajuste com base em uma margem um pouco mais espessa do que a do PC.

Itens de configuração.

• Usar configurações individuais: Permite ajuste detalhado com valores separados para cima, direita, baixo e esquerda.
• Geral: Padding + unidade (px / % / vw / vh): aplica o mesmo preenchimento interno aos quatro lados.
• Individual: Padding superior / direito / inferior / esquerdo + unidade: ajusta o espaço interno por lado.
• Responsivo: permite valores por dispositivo para evitar quebra de layout.

Posição

Pode diferir ligeiramente da interface real.

Point:
Define a posição de posicionamento do elemento. É possível controlar a sobreposição e a distância dos elementos ao redor.

O que essa configuração altera: A configuração da posição é um item altamente influente, pois pode causar falha no Layout.

Dica de ajuste:
É mais fácil manter se o Relativo for estabelecido primeiro e o Absoluto for limitado apenas às partes necessárias.

Itens de configuração.

• Tipo de posicionamento (relativo / absoluto): seleciona os critérios de posicionamento e determina se o posicionamento Normal ou Absoluto é estabelecido.
• Superior / Direita / Inferior / Esquerda (Auto / Value) + Unidade: define o deslocamento em cada direção e faz o ajuste fino da posição.
• Z-Index (Auto / Value): define a ordem de sobreposição e controla a relação frente-verso dos elementos.
• Transform Translate X / Y + Unidade: define o deslocamento X/Y para ajustar a posição visual.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Nota: A seleção de absolute posicionará o elemento em relação ao seu elemento pai (ancestral mais próximo com position: relative definido). Isso é adequado para produzir sobreposição, pois não afetará o Layout de outros elementos, mas deve-se tomar cuidado para evitar o desalinhamento no Responsivo. O Transform Translate funciona independentemente da position e move apenas a posição de desenho do elemento.

Ordem das camadas

Pode diferir ligeiramente da interface real.

Ponto:
Define a ordem de sobreposição de cada camada; controla a relação frente-verso de Fundo, banda, Miniatura e conteúdo.

O que essa configuração altera: Elimina o problema de o texto ficar oculto por sobreposições não intencionais.

Dica de ajuste:
Fixe o Content na frente primeiro e organize as camadas de decoração sob ele para reduzir os problemas.

Configurações

• Content: define a ordem de sobreposição das camadas de conteúdo, mantendo o texto e as principais informações na parte superior.
• Thumbnail: define a ordem de sobreposição da camada Miniatura, ajustando-a de modo que a Imagem não oculte o texto.
• Bandas: define a ordem de sobreposição das camadas de bandas e controla a relação frente-verso das bandas decorativas.
• Background: define a ordem de sobreposição das camadas Fundo, tornando-as estáveis à exibição como base geral.

Notas: O Ordem das camadas é controlado pelo z-index do CSS. Quanto mais alto for o valor, mais o exibição será colocado na frente; os valores do Padrão são Background: 0, Band: 5, Thumbnail: 10 e Content: 20. Se ocorrer uma sobreposição não intencional, primeiro verifique a ordem com essa configuração.

Índice z fixo interno:
Na camada Content, o ícone é fixado em índice z: 25 e o Texto é fixado em índice z: 30. O pseudoelemento ::after no Sombra interno tem z-index: 100 e o Animação de moldura tem z-index: 1001. Esses valores não podem ser Alterar na configuração Ordem das camadas.