Blotch-Bibliothek

Die Blotch-Bibliothek ist die Sammlung von Hooks und Komponenten, die jedes Widget verwenden kann. Die Hooks liefern Ihrem Widget seine Eingaben, Daten aus APIs, die Zeitzone und Sprache des Rahmens und mehr. Die Komponenten zeichnen Text, Diagramme, Kalender, Karten und andere gängige Bausteine in einem Stil für E-Ink: schwarz-weiß, scharf und auch von der anderen Seite des Raums aus lesbar.

Importieren Sie aus der Bibliothek mit dem Präfix ~lib/. Jede Seite dieser Referenz zeigt ihren Import:

import { useFetch } from "~lib/use-fetch";
import { Heading } from "~lib/typography";
import { LineChart } from "~lib/charts/line-chart";

Installieren müssen Sie nichts. Im Widget-Studio steht die Bibliothek immer bereit, mit Autovervollständigung für jeden Hook, jede Komponente und jede Prop.

Was sie enthält

• Hooks lesen alles, was Ihr Widget über den Ort weiß, an dem es läuft: useInputs liefert seine Einstellungen, useFetch Daten, useLayoutShape die Größe seines Felds, und useTimeZone und usePreferredLanguage liefern die Einstellungen des Rahmens.
• Typografie, etwa Heading, Paragraph und Display, setzt Text in Größenstufen, die zum E-Ink-Display passen.
• Die Komponenten unter Layout, etwa Card und Brim, ordnen die Teile eines Widgets an.
• Die Komponenten unter Datenanzeige, etwa Stat, Table und Timeline, zeigen Zahlen und Listen, und die Karten zeigen Orte und Routen.
• Diagramme stellen Zahlen als Linien, Balken, Ringe und mehr dar. Der Einstieg steht unter Daten als Diagramm darstellen.
• Kalender zeigen Termine nach Tag, Woche oder Monat. Siehe Einen geteilten Kalender anzeigen.
• Icon zeichnet jedes von Tausenden Symbolen, und QRCode verlinkt ein Widget mit weiteren Inhalten auf dem Smartphone.

Live-Beispiele

Jedes Beispiel auf diesen Seiten ist live: Es wird vom Storybook der Bibliothek gezeichnet, im hellen oder dunklen Modus dieser Website. Was Sie sehen, ist also genau das, was die Komponente zeichnet. Öffnen Sie ein Beispiel in Storybook, um seine Props zu ändern und das Ergebnis sofort zu sehen.