Für jede Größe gestalten

Andere können Ihr Widget auf ihrer Seite beliebig groß machen, etwa als schmalen Streifen am unteren Rand, als kleines Quadrat in einer Ecke, als Spalte an der Seite oder über den ganzen Bildschirm. Ein gutes Widget wirkt in jeder dieser Größen durchdacht. Der Trick ist, in einem kleinen Bereich weniger zu zeigen, nicht dasselbe kleiner.

Jede Größe in der Vorschau prüfen

Über der Vorschau im Widget-Studio zeigen die Tabs für die Vorschaugröße Ihr Widget in den gängigen Formen:

Vorschaugröße	Form	Geeignet für
Quadratisch	stack	Der Hauptblock mit ein paar Details darunter
Ziegel	compact	Das eine, was am meisten zählt, und nicht mehr
Breit	side	Der Hauptblock mit Details daneben
Banner	band	Eine einzige Zeile
Hoch	stack, hoch	Platz für mehr Details darunter
Spalte	narrow	Ein einzelner Stapel, von oben nach unten
Vollständig	side, hoch	Der ganze Bildschirm: alles, was Sie zu zeigen haben

Sie können auch die Ränder der Vorschau ziehen, um jede Größe dazwischen auszuprobieren. Prüfen Sie jeden Tab, bevor Sie veröffentlichen: Beim Veröffentlichen speichert Blotch außerdem für die Widget-Bibliothek eine Vorschau Ihres Widgets in jeder Größe.

Von der Form ausgehen

useLayoutShape sagt Ihnen, welche Form Ihr Widget ausfüllen muss, damit Sie ein passendes Layout wählen können:

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 sagt Ihnen, ob der Bereich hoch genug für eine geräumigere Version seiner Form ist, etwa Vollständig im Vergleich zu Breit. Verwenden Sie die Form statt eigener Breitenprüfungen. So wechselt Ihr Widget sein Layout bei denselben Größen wie jedes andere Widget.

Oder Klassen verwenden

Für kleinere Änderungen, etwa um eine zusätzliche Zeile auszublenden, sind Tailwind-Klassen einfacher, die auf die Größe des Widgets selbst reagieren:

Klassenpräfix	Gilt, wenn das Widget …
@sm:	mindestens so breit wie eine schmale Spalte ist
@md:	mindestens halb so breit wie der Bildschirm ist
@lg:	breit genug für einen Block neben dem Hauptblock ist
short:	niedrig und breit ist, wie Banner
compact:	niedrig und klein ist, wie Ziegel
tall:	hoch ist, wie Hoch und Vollständig

@max-sm:, @max-md: und @max-lg: gelten unterhalb dieser Breiten. So blendet className="short:hidden" ein Element in einem Streifen aus, und className="flex flex-col @lg:flex-row" setzt zwei Blöcke nebeneinander, sobald genug Platz ist.

Diese Präfixe messen den Bereich des Widgets, nicht den Bildschirm. Verwenden Sie deshalb nicht die Bildschirm-Präfixe von Tailwind wie sm: und md:.

Die genauen Größen finden Sie unter Breakpoints in der Referenz.

Die Ränder dem Rahmen überlassen

Wer Ihr Widget platziert, wählt eine Umrandung, einen Innenabstand und auf Wunsch eine Namensleiste am oberen Rand. Blotch zeichnet sie um Ihr Widget herum und lässt Ihrem Widget nur den Platz darin. Deshalb gilt:

• Fügen Sie keinen Innenabstand um Ihr Widget hinzu. Lassen Sie seinen Inhalt bis an die Ränder seines Bereichs reichen.
• Fügen Sie keinen Titel mit dem Namen Ihres Widgets hinzu. Der Rahmen kann den Namen anzeigen. Überschriften sind für den Inhalt da, etwa für die Mannschaften eines Spiels oder den Titel eines Films.

Um zu sehen, wie Ihr Widget mit einer Umrandung aussieht, stellen Sie eine im Menü Rahmen über der Vorschau ein.

Einpassen statt überlaufen

Inhalt, der über den Rand des Bereichs hinausreicht, wird abgeschnitten. So bleibt alles darin:

• Legen Sie Größen in Prozent oder mit Flexbox fest, nicht in Pixeln, die Sie aus dem Bereich berechnen.
• Verwenden Sie die Typografie-Komponenten. Sie können Text auf eine bestimmte Zahl von Zeilen begrenzen und mit „…“ enden lassen.
• Packen Sie einen Block, der die restliche Höhe einnehmen soll, in ein Brim. Die Komponente blendet ihn dort sauber aus, wo er abgeschnitten wird.