Impostazioni layout

Larghezza

Potrebbe differire leggermente dall interfaccia reale.

Punti:
Imposta la larghezza dell'elemento; la combinazione min/max aumenta la stabilità di Layout.

Cosa cambia questa impostazione:
Particolarmente importante per le operazioni con frasi di lunghezza variabile.

Consigli per la regolazione:
Se si imposta prima la min-width e poi si regola la width / max-width, è meno probabile che si rompa.

Elementi di configurazione.

• Usa larghezza: abilita/disabilita l'impostazione della larghezza e la fissa solo se necessario.
• Larghezza + Unità (px / % / vw / vh / fit-content): imposta la larghezza e Unità per regolare la diffusione in base alla quantità di contenuto.
• Utilizza larghezza minima / Larghezza minima + Unità: imposta la larghezza minima e previene lo schiacciamento nelle frasi brevi.
• Utilizza larghezza massima / Larghezza massima` + Unità: imposta la larghezza massima e impedisce un eccessivo allungamento orizzontale nelle frasi lunghe.
• Responsivo Switching: abilita le impostazioni individuali specifiche del dispositivo e impedisce il collasso di Visualizzazione.

Note: Selezionando adatta al contenuto per Unità, la larghezza di Pulsante verrà adattata a Automatico per corrispondere alla lunghezza di Testo. La specifica % è un rapporto con la larghezza dell'elemento genitore; se usata insieme a min/max, consente di rendere flessibile Layout evitando fluttuazioni estreme della larghezza.

Altezza

Potrebbe differire leggermente dall interfaccia reale.

Punti:
Imposta la Altezza dell'elemento, un'impostazione che si allinea con il conteggio delle linee e la decorazione Testo.

Cosa cambia questa impostazione:
Uno Altezza insufficiente lo fa sembrare stretto, uno Altezza eccessivo lo fa sembrare allungato.

Consigli per la regolazione:
Decidere innanzitutto uno Altezza minimo e utilizzare Altezza fisso solo quando necessario per garantire la flessibilità.

Opzioni di impostazione.

• Usa altezza: attiva/disattiva l'impostazione Altezza e fissa solo quando necessario.
• Altezza + Unità (px / % / vw / vh): impostare Altezza e Unità per regolare la densità dell'elemento.
• Usa altezza minima / Altezza minima + Unità: imposta il valore minimo di Altezza e garantisce un'area di facile accesso.
• Utilizza altezza massima / Altezza massima` + Unità: imposta lo Altezza massimo e impedisce la spaziatura.
• Responsivo Switching: abilita le impostazioni individuali specifiche del dispositivo e impedisce il collasso di Visualizzazione.

**Fissando troppo la Altezza si possono verificare sbalzi se si aumenta la quantità di Testo. Se è necessario uno Altezza fisso, è più sicuro usare min-height in modo che possa essere allungato in base alla quantità di contenuto. Si raccomanda un minimo di 44px di Altezza per l'area del tap (linee guida WCAG Touch Target).

Effetto di overflow: hidden:** Il corpo Pulsante, l'area di contenuto, Miniatura, la banda e Sfondo hanno tutti un overflow: hidden di Applica. Il contenuto viene quindi ritagliato lungo Impostazioni raggio bordo. Si noti che le Ombra di grandi dimensioni e le deformazioni che sporgono sono ritagliate da overflow: hidden (neon-01 / glow-01 in Animazione cornice sono eccezionalmente passati a overflow: visible).

Margine

Potrebbe differire leggermente dall interfaccia reale.

Punto:
Imposta il margine esterno dell'elemento. Si tratta di una voce di base per la progettazione della distanza tra gli elementi anteriori e posteriori.

Cosa cambia questa impostazione:
Una migliore progettazione dei margini migliora la coesione delle informazioni e la guida degli occhi.

Suggerimenti per la regolazione:
Impostare prima le regole verticali e poi Applica per ogni Pulsante, in modo che l'intera pagina sia allineata.

Impostazioni.

• Usa Impostazioni IndueZiduali: consente una regolazione dettagliata con valori individuali per l'alto, il basso, la sinistra e la destra invece di un valore batch.
• Batch: Margine + Unità (px / % / vw / vh / auto): stesso margine esterno Applica in tutte e quattro le direzioni, allinea rapidamente le regole di spaziatura.
• Individuale: Margine superiore / destro / inferiore / sinistro + Unità: regola i margini in ogni direzione e ottimizza la distanza tra gli elementi anteriori e posteriori.
• Responsivo Switching: abilita le impostazioni individuali specifiche del dispositivo e impedisce il collasso di Visualizzazione.

Note: Usare auto per abilitare l'allineamento di Centro nella direzione di Orizzontale (ad es. Margine sinistro: auto + Margine destro: auto); usare vw / vh su Margine di Unità per specificare relativo alla finestra di visualizzazione. Automatico relativo a Automatico e i margini saranno regolati Automatico in base alla larghezza dello schermo.

Spaziatura interna

Potrebbe differire leggermente dall interfaccia reale.

Punti:
Imposta il margine interno dell'elemento, eliminando la rigidità di Testo e Seleziona icona.

Cosa cambia questa impostazione:
Influisce direttamente anche sulla pressabilità (area del rubinetto).

Consigli per la regolazione:
SP è particolarmente soggetto a margini verticali insufficienti, quindi si consiglia di regolare in base a un margine leggermente più spesso rispetto a PC.

Voci di impostazione.

• Usa Impostazioni IndueZiduali: consente una regolazione dettagliata con valori individuali per l'alto, il basso, la sinistra e la destra invece di un valore di lotto.
• Batch: Padding + Unità (px / % / vw / vh): stesso margine interno in tutte e quattro le direzioni Applica e densità Pulsante uniforme.
• Individuale: Padding Alto / Destra / Basso / Sinistra + Unità: regola il margine interno in ogni direzione, eliminando il testo e gli inceppamenti Seleziona icona.
• Responsivo Switching: abilita le impostazioni individuali specifiche del dispositivo e impedisce il collasso di Visualizzazione.

Posizione

Potrebbe differire leggermente dall interfaccia reale.

Punto:
Imposta la posizione di inserimento dell'elemento. È possibile controllare la sovrapposizione e la distanza dagli elementi circostanti.

Cosa cambia questa impostazione:
L'impostazione della posizione è un elemento molto influente in quanto può causare il malfunzionamento di Layout.

Consigli per la regolazione:
È più facile da mantenere se Relativo viene stabilito per primo e Assoluto viene limitato solo alle parti necessarie.

Voci di configurazione.

• Tipo di posizionamento" (relativo/assoluto): seleziona il criterio di posizionamento e determina se viene stabilito il posizionamento Normale o Assoluto.
• Alto / Destra / Basso / Sinistra (Auto / Value) + Unità: imposta l'offset in ciascuna direzione e perfeziona la posizione.
• Z-Index (Auto / Valore): imposta l'ordine di sovrapposizione e controlla il rapporto fronte-retro degli elementi.
• Trasformazione X / Y` + Unità: imposta lo spostamento X/Y e mette a punto la posizione visiva.
• Responsivo Switching: abilita le impostazioni individuali specifiche del dispositivo e impedisce il collasso di Visualizzazione.

**Selezionando assoluto', l'elemento verrà posizionato rispetto al suo genitore (l'antenato più vicino con posizione: relativa' impostata). Questo è adatto per produrre sovrapposizioni, in quanto non influisce su Layout di altri elementi, ma occorre prestare attenzione per evitare disallineamenti a Responsivo. La Trasformata funziona indipendentemente dalla posizione e sposta solo la posizione di disegno dell'elemento.