データ表示
Relative Time
経過した時間や先の時刻を「3分前」「2時間後」のように表す time 要素。Intl.RelativeTimeFormat と Temporal で組み立て、live を指定するとタイマーで自動更新します。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<RelativeTime value={Temporal.Now.instant().subtract({ hours: 2 })} live />
<RelativeTime value="2026-01-01" locale="ja" numeric="always" />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
value 必須 | RelativeTimeValue | — | The point in time to describe. Accepts `Temporal.PlainDate`, `Temporal.PlainDateTime`, `Temporal.ZonedDateTime`, `Temporal.Instant`, or an ISO string. |
base | RelativeTimeValue | — | Reference instant (default: now at render / tick time). Accepts the same union as `value`. |
locale | string | — | BCP-47 locale string (default: system locale). |
numeric | 'auto' | 'always' | auto | `'auto'` emits "yesterday"/"今日" etc.; `'always'` always uses a number. |
live | boolean | false | Re-render on a timer so "3分前" stays fresh. |
updateInterval | number | 30000 | How often to re-render in milliseconds when `live` is true. Clamped to a minimum of 1000 ms (the finest displayed unit is seconds). |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。