Diseñar para todos los tamaños

Cada persona puede dar a tu widget el tamaño que quiera en su página: una tira fina en la parte inferior, un cuadrado pequeño en una esquina, una columna en un lateral o la pantalla entera. Un buen widget parece pensado para cada uno de ellos. El truco está en mostrar menos en un recuadro pequeño, no lo mismo en más pequeño.

Ver la vista previa en todos los tamaños

Encima de la vista previa del Estudio de widgets, las pestañas Tamaño de la vista previa muestran tu widget en las formas más habituales:

Tamaño de la vista previa	Forma	Ideal para
Cuadrado	stack	El bloque principal con un poco de detalle debajo
Ladrillo	compact	Lo que más importa, y nada más
Ancho	side	El bloque principal con detalle al lado
Banner	band	Una sola fila
Alto	stack, alto	Espacio para más detalle debajo
Columna	narrow	Una sola pila, de arriba abajo
Completo	side, alto	La pantalla entera: todo lo que tengas que mostrar

También puedes arrastrar los bordes de la vista previa para probar cualquier tamaño intermedio. Revisa todas las pestañas antes de publicar: al publicar, Blotch guarda también una vista previa de tu widget en cada tamaño para la Biblioteca de widgets.

Planificar a partir de la forma

useLayoutShape te dice qué forma tiene que ocupar tu widget, para que puedas elegir un diseño para ella:

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 te dice si el recuadro tiene altura suficiente para una versión más holgada de su forma, como Completo frente a Ancho. Usa la forma en lugar de tus propias comprobaciones de anchura, para que tu widget cambie de diseño en los mismos tamaños que todos los demás widgets.

O usar clases

Para cambios más pequeños, como ocultar una línea de más, es más sencillo usar clases de Tailwind que responden al tamaño del propio widget:

Prefijo de clase	Se aplica cuando el widget es…
@sm:	Al menos tan ancho como una columna estrecha
@md:	Al menos la mitad de ancho que la pantalla
@lg:	Lo bastante ancho para un bloque junto al principal
short:	Bajo y ancho, como Banner
compact:	Bajo y pequeño, como Ladrillo
tall:	Alto, como Alto y Completo

@max-sm:, @max-md: y @max-lg: se aplican por debajo de esas anchuras. Por ejemplo, className="short:hidden" oculta un elemento en una tira, y className="flex flex-col @lg:flex-row" coloca dos bloques uno al lado del otro en cuanto hay espacio.

Estas clases miden el recuadro del widget, no la pantalla, así que no uses los prefijos de pantalla de Tailwind, como sm: y md:.

Consulta los puntos de ruptura en la referencia para ver los tamaños exactos.

Dejar los bordes al marco

La persona que coloca tu widget elige un borde, un relleno y, si quiere, una barra con su nombre en la parte superior. Blotch los dibuja alrededor de tu widget y le deja solo el espacio interior. Por eso:

• No añadas relleno alrededor de tu widget. Deja que su contenido llegue hasta los bordes de su recuadro.
• No añadas un título con el nombre de tu widget. El marco puede mostrar su nombre. Los encabezados son para el contenido, como los equipos de un partido o el título de una película.

Para ver cómo queda tu widget dentro de un borde, elige uno en el menú Borde, encima de la vista previa.

Ajustar sin desbordar

El contenido que sobrepasa el borde del recuadro se corta. Para que todo quede dentro:

• Dimensiona los elementos con porcentajes o con flexbox, no con píxeles calculados a partir del recuadro.
• Usa los componentes de tipografía, que pueden limitar el texto a un número de líneas y terminarlo con «…».
• Envuelve en un Brim el bloque que deba ocupar la altura que quede: lo difumina con limpieza donde se corta.