Timer

Zeigt einen Timer an, der einen vordefinierten Callback auslöst, wenn die Zeit abgelaufen ist. Ein Beispiel für einen Anwendungsfall ist die Zeitmessung von Quizzen.

Optionen

id | string: die eindeutige String-ID für den Timer. Wenn eine ID gesetzt ist, ist die Timer-Komponente über Seitenaktualisierungen hinweg beständig. Default: none.
active | boolean (required): Flagge, die umgeschaltet werden kann, um den Timer zu starten oder zu pausieren. Default: none.
belowZero | boolean: steuert, ob der Timer weiterzählt, nachdem die Dauer erschöpft ist. Default: false.
duration | number (required): Dauer in Sekunden für den Timer. Default: none.
invisible | boolean: steuert, ob der Timer ausgeblendet werden soll. Default: false.
legend | string: Text, der vor dem Timer angezeigt wird. Default: ''.
style | object: CSS-Inline-Stile. Default: {}.
onTimeUp | function: Callback, der aufgerufen wird, wenn der Timer abläuft. Default: onTimeUp() {}.

Beispiele

Live-Editor

<Timer 
    id='test-quiz'
    active={true} 
    duration={50} 
    onTimeUp={() => {
      alert( 'done' );
    }}
/>

<Timer 
    id='test-quiz'
    active={true} 
    duration={50} 
    onTimeUp={() => {
      alert( 'done' );
    }}
/>

Ergebnis

ReferenceError: Provider is not defined

Optionen​

Beispiele​

Optionen

Beispiele