Passa al contenuto principale

Libreria Blotch

La libreria Blotch è l’insieme di hook e componenti che ogni widget può usare. Gli hook danno al tuo widget i suoi input, i dati delle API, il fuso orario e la lingua della cornice, e altro ancora. I componenti disegnano testo, grafici, calendari, mappe e altri elementi comuni in uno stile pensato per l’inchiostro elettronico (e-ink): in bianco e nero, nitido e leggibile dall’altra parte di una stanza.

Importa dalla libreria con il prefisso ~lib/. Ogni pagina di questo riferimento mostra la sua importazione:

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

Non c’è nulla da installare. La libreria è sempre disponibile nello Studio dei widget, con il completamento automatico per ogni hook, componente e prop.

Che cosa contiene​

  • Gli Hook leggono tutto ciò che il tuo widget sa del luogo in cui viene eseguito: useInputs per le sue impostazioni, useFetch per i dati, useLayoutShape per la dimensione del suo riquadro, e useTimeZone e usePreferredLanguage per le impostazioni della cornice.
  • I componenti di Tipografia, come Heading, Paragraph e Display, compongono il testo su una scala di dimensioni adatta allo schermo.
  • I componenti di Layout, come Card e Brim, dispongono le parti di un widget.
  • I componenti di Visualizzazione dei dati, come Stat, Table e Timeline, mostrano cifre ed elenchi, e le mappe mostrano luoghi e percorsi.
  • I Grafici disegnano i numeri come linee, barre, anelli e altro ancora. Per iniziare, vedi Mostrare i dati in un grafico.
  • I componenti di Calendario mostrano gli eventi per giorno, settimana o mese. Vedi Mostrare un calendario condiviso.
  • Icon disegna una qualsiasi tra migliaia di icone, e QRCode collega un widget a ulteriori contenuti su un telefono.

Esempi dal vivo​

Ogni esempio in queste pagine è dal vivo: lo disegna lo Storybook della libreria, nella modalità chiara o scura del sito, quindi ciò che vedi è esattamente ciò che il componente disegna. Apri un esempio in Storybook per cambiarne le prop e vedere subito il risultato.