Progettare per ogni dimensione

Le persone possono dare al tuo widget qualsiasi dimensione nella loro pagina: una striscia sottile in basso, un quadratino in un angolo, una colonna sul lato o lo schermo intero. Un buon widget appare pensato apposta in ognuna di queste. Il trucco è mostrare meno in un riquadro piccolo, non la stessa cosa in piccolo.

Provare ogni dimensione in anteprima

Sopra l’anteprima, nello Studio dei widget, le schede Dimensione anteprima mostrano il tuo widget nelle forme più comuni:

Dimensione anteprima	Forma	Ideale per
Quadrato	stack	Il blocco principale con qualche dettaglio sotto
Mattone	compact	La cosa più importante, e niente di più
Largo	side	Il blocco principale con i dettagli accanto
Banner	band	Una sola riga
Alto	stack, alta	Spazio per più dettagli sotto
Colonna	narrow	Una sola pila, dall’alto in basso
Completo	side, alta	Lo schermo intero: tutto ciò che hai da mostrare

Puoi anche trascinare i bordi dell’anteprima per provare qualsiasi dimensione intermedia. Controlla ogni scheda prima di pubblicare: quando pubblichi, Blotch salva anche un’anteprima del tuo widget in ogni dimensione per la Libreria dei widget.

Partire dalla forma

useLayoutShape ti dice quale forma deve riempire il tuo widget, così puoi scegliere il layout adatto:

import { Display, Paragraph } from "~lib/typography";
import { useLayoutShape } from "~lib/use-layout-shape";

export const Widget = () => {
  const { shape } = useLayoutShape();
  const temperature = <Display>18°</Display>;
  const summary = <Paragraph>Sunny, with a light breeze.</Paragraph>;

  if (shape === "compact") {
    return <div className="flex size-full items-center">{temperature}</div>;
  }

  if (shape === "band" || shape === "side") {
    return (
      <div className="flex size-full items-center gap-4">
        {temperature}
        {summary}
      </div>
    );
  }

  return (
    <div className="flex size-full flex-col gap-2">
      {temperature}
      {summary}
    </div>
  );
};

tall indica se il riquadro ha l’altezza per una versione più spaziosa della sua forma, come Completo rispetto a Largo. Usa la forma invece di controllare tu la larghezza, così il tuo widget cambia layout alle stesse dimensioni di tutti gli altri widget.

Oppure usare le classi

Per modifiche più piccole, come nascondere una riga in più, sono più semplici le classi Tailwind che rispondono alle dimensioni del widget stesso:

Prefisso di classe	Si applica quando il widget è…
@sm:	Largo almeno quanto una colonna stretta
@md:	Largo almeno metà schermo
@lg:	Abbastanza largo per un blocco accanto a quello principale
short:	Basso e largo, come Banner
compact:	Basso e piccolo, come Mattone
tall:	Alto, come Alto e Completo

@max-sm:, @max-md: e @max-lg: si applicano al di sotto di quelle larghezze. Ad esempio, className="short:hidden" nasconde un elemento in una striscia, e className="flex flex-col @lg:flex-row" mette due blocchi uno accanto all’altro quando c’è spazio.

Queste classi misurano il riquadro del widget, non lo schermo, quindi non usare i prefissi di schermo di Tailwind come sm: e md:.

Consulta i breakpoint nel riferimento per le dimensioni esatte.

Lasciare i bordi alla cornice

Chi posiziona il tuo widget sceglie un bordo, la spaziatura interna e, se vuole, una barra con il nome in alto. Blotch li disegna intorno al tuo widget e gli lascia solo lo spazio all’interno. Quindi:

• Non aggiungere spaziatura intorno al widget. Lascia che il suo contenuto arrivi fino ai bordi del riquadro.
• Non aggiungere un titolo con il nome del widget. La cornice può mostrarne il nome. I titoli servono al contenuto, come le squadre di una partita o il titolo di un film.

Per vedere come appare il tuo widget dentro un bordo, impostane uno dal menu Bordo sopra l’anteprima.

Restare nel riquadro

Il contenuto che supera il bordo del riquadro viene tagliato. Per tenere tutto all’interno:

• Dimensiona gli elementi in percentuale o con flexbox, non in pixel calcolati a partire dal riquadro.
• Usa i componenti tipografici, che possono limitare il testo a un certo numero di righe e terminarlo con «…».
• Racchiudi in un Brim il blocco che deve occupare l’altezza rimasta: lo sfuma con pulizia nel punto in cui viene tagliato.