メインコンテンツまでスキップ

Blotchライブラリ

Blotchライブラリは、どのウィジェットでも使えるフックとコンポーネントのセットです。フックは、入力項目、APIから取得したデータ、フレームのタイムゾーンや言語などをウィジェットに渡します。コンポーネントは、テキスト、グラフ、カレンダー、地図などのよく使う部品を、電子ペーパー（e-ink）向けのスタイルで描画します。白黒で、くっきりしていて、部屋の反対側からでも読みやすいスタイルです。

このリファレンスのコンポーネントとフックの各ページは、英語で表示されます。

ライブラリからは~lib/プレフィックスを付けてインポートします。このリファレンスの各ページに、それぞれのインポート文が載っています。

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

インストールは必要ありません。ライブラリはウィジェットスタジオでいつでも使え、すべてのフック、コンポーネント、propsが自動補完されます。

含まれるもの​

  • フックは、ウィジェットが動いている環境についての情報を読み取ります。設定にはuseInputs、データにはuseFetch、ボックスのサイズにはuseLayoutShape、フレームの設定にはuseTimeZoneとusePreferredLanguageを使います。
  • タイポグラフィ（Heading、Paragraph、Displayなど）は、パネルに合った文字サイズの段階でテキストを組みます。
  • レイアウトコンポーネント（Card、Brimなど）は、ウィジェットの各部分を配置します。
  • データ表示コンポーネント（Stat、Table、Timelineなど）は数値やリストを表示し、地図は場所やルートを表示します。
  • グラフは、数値を折れ線、棒、リングなどで描きます。まずはデータをグラフにするをご覧ください。
  • カレンダーは、予定を日・週・月ごとに表示します。共有カレンダーを表示するを参照してください。
  • Iconは数千種類のアイコンを描画でき、QRCodeを使えば、続きの情報をスマートフォンで開けるようにできます。

ライブで動く例​

これらのページの例はすべてライブで動いています。ライブラリのStorybookがサイトのライトモードまたはダークモードに合わせて描画しているので、表示されているものがそのままコンポーネントの描画結果です。例をStorybookで開けば、propsを変えて結果をすぐに確認できます。