Concevoir pour toutes les tailles

Les gens peuvent donner n’importe quelle taille à votre widget sur leur page : une fine bande en bas, un petit carré dans un coin, une colonne sur le côté ou l’écran entier. Un bon widget paraît pensé pour chacune d’elles. L’astuce consiste à montrer moins dans une petite zone, et non la même chose en plus petit.

Prévisualiser chaque taille

Au-dessus de l’aperçu, dans le Studio de widgets, les onglets Taille d’aperçu montrent votre widget dans les formes courantes :

Taille d’aperçu	Forme	Idéal pour
Carré	stack	Le bloc principal, avec un peu de détail en dessous
Brique	compact	L’essentiel, et rien de plus
Large	side	Le bloc principal, avec du détail à côté
Bannière	band	Une seule ligne
Vertical	stack, en hauteur	De la place pour plus de détail en dessous
Colonne	narrow	Une seule pile, de haut en bas
Plein écran	side, en hauteur	L’écran entier : tout ce que vous avez à montrer

Vous pouvez aussi faire glisser les bords de l’aperçu pour essayer n’importe quelle taille intermédiaire. Vérifiez chaque onglet avant de publier : lorsque vous publiez, Blotch enregistre aussi un aperçu de votre widget à chaque taille pour la Bibliothèque de widgets.

Partir de la forme

useLayoutShape vous indique quelle forme votre widget doit remplir, pour que vous puissiez choisir une mise en page adaptée :

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 indique si la zone a assez de hauteur pour une version plus spacieuse de sa forme, comme Plein écran par rapport à Large. Fiez-vous à la forme plutôt qu’à vos propres tests de largeur : votre widget change ainsi de mise en page aux mêmes tailles que tous les autres widgets.

Ou utiliser des classes

Pour des changements plus légers, comme masquer une ligne en trop, les classes Tailwind qui réagissent à la taille du widget lui-même sont plus simples :

Préfixe de classe	S’applique quand le widget est…
@sm:	Au moins aussi large qu’une colonne étroite
@md:	Large d’au moins la moitié de l’écran
@lg:	Assez large pour un bloc à côté du bloc principal
short:	Bas et large, comme Bannière
compact:	Bas et petit, comme Brique
tall:	Haut, comme Vertical et Plein écran

@max-sm:, @max-md: et @max-lg: s’appliquent en dessous de ces largeurs. Par exemple, className="short:hidden" masque un élément dans une bande, et className="flex flex-col @lg:flex-row" place deux blocs côte à côte dès qu’il y a la place.

Ces classes mesurent la zone du widget, pas l’écran : n’utilisez donc pas les préfixes d’écran de Tailwind, comme sm: et md:.

Consultez les points de rupture dans la référence pour connaître les tailles exactes.

Laisser les bords au cadre

La personne qui place votre widget choisit une bordure, une marge intérieure et, si elle le souhaite, une barre de nom en haut. Blotch les dessine autour de votre widget et ne lui laisse que l’espace intérieur. Par conséquent :

• N’ajoutez pas de marge autour de votre widget. Laissez son contenu aller jusqu’aux bords de sa zone.
• N’ajoutez pas de titre qui nomme votre widget. Le cadre peut afficher son nom. Les titres servent au contenu, comme les équipes d’un match ou le titre d’un film.

Pour voir à quoi ressemble votre widget avec une bordure, choisissez-en une dans le menu Bordure au-dessus de l’aperçu.

Tenir dans la zone sans déborder

Le contenu qui dépasse le bord de la zone est coupé. Pour que tout reste à l’intérieur :

• Dimensionnez les éléments en pourcentages ou avec flexbox, pas en pixels calculés d’après la zone.
• Utilisez les composants typographiques, qui peuvent limiter un texte à un nombre de lignes et le terminer par « … ».
• Placez dans un Brim un bloc qui doit occuper toute la hauteur restante : il le fait disparaître proprement en fondu là où il est coupé.