Timer

fandhe-frontend-pre-styled-ui の timer mod が提供するスタイル済み Timer 部品です。

Demo

headless-ui の Timer（tick 注入型・idle/running/paused/completed の決定的状態機械）に pre-styled-ui のセグメント表示（分:秒）CSS を適用した静的掲示です。90 秒のカウントダウンを開始して 35 秒経過した running 状態を固定表示しています。実 tick 駆動（setInterval）は fandhe-frontend-wasm-full::headless_timer のスコープです。

00Min

55Sec

Features

tick 注入型・idle/running/paused/completed の決定的状態機械（fandhe-frontend-interactive の dispatch 経由）
countdown（カウントダウン）と count_up（カウントアップ）の 2 モードを持つ
実 tick 駆動（setInterval）は fandhe-frontend-wasm-full 側のスコープ（本ページは SSR 静的掲示）

Anatomy

root
  area
    item
      item-value
      item-label
    separator
  control
    action-trigger

API Reference

Arguments

Name	Type	Default	Description
Timer::countdown	fn(start_ms, interval_ms) -> Timer		カウントダウン型 Timer を構築する。
Timer::count_up	fn(target_ms, interval_ms) -> Timer		カウントアップ型 Timer を構築する。

Data Attributes

Part	Attribute	Observed Values
action-trigger	data-action	pause, reset
item	data-type	minutes, seconds
item-label	data-type	minutes, seconds
item-value	data-type	minutes, seconds
root	data-countdown
root	data-elapsed	35000
root	data-interval	1000
root	data-start-ms	90000
root	data-state	running
root	data-target-ms	0

Examples

90 秒カウントダウン（35 秒経過）

start → 35 秒分の tick を注入した running 状態を固定表示します。

00Min

55Sec

Accessibility

WAI-ARIA

Attribute	Description
aria-live	経過表示の更新を支援技術へ通知する（headless-ui 側の root パーツが付与）。