進捗ウィジェットProgressWidgetExperimental
進捗値、補足文、進捗バーをカードとしてまとめて表示します。
プレビュー
四半期目標
72%
前週比 +8pt
状態とバリエーション
割合表示
label を省略すると value / max から割合を表示します。
四半期目標
72%
前週比 +8pt
ライブ更新
親の状態が変わると、カード内の値、バー、補足文も更新されます。動的な補足文は subtextLive で通知できます。
同期の進捗
36%
残り 4 件を同期しています。
値ラベル付き
金額や件数など、割合以外を大きく表示したい場合は label を指定します。
売上目標
25,000円
年間目標の 50% に到達
容量レンジ
容量のような 100 以外の範囲では max と label を合わせて指定します。
ストレージ使用量
42 / 64 GB
残り 22 GB を利用できます
高い進捗
完了に近い進捗でもカードサイズは変えず、補足文で状況を伝えます。
対応率
92%
SLA まで残り 3 件
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | - | カード上部に表示する指標名です。 |
| value | number | - | 現在値です。max に対する割合で進捗バーを描画します。 |
| max | number | 100 | 進捗の最大値です。 |
| label | string | - | 大きく表示する値です。省略時は割合を表示します。 |
| subtext | string | - | 進捗バーの下に表示する補足文です。 |
| progressLabel | string | - | 内部の進捗バーに付けるアクセシブルラベルです。省略時は title を使います。 |
| subtextLive | 'off' | 'polite' | 'assertive' | 'off' | 動的に変わる補足文をスクリーンリーダーへ通知するかを指定します。 |
| icon | React.ReactNode | - | ヘッダー右側に表示するアイコンです。 |
| className | string | - | カードのラッパーに追加するクラスです。 |
使い方
Loading...