Components
Live toggle
The Live / Pause switch of a live page, with the time since the page last read its data.
LiveToggle is the Live / Pause switch of a page declared with live. It shows how long ago the page last read its data ("Updated 12 s ago", counted every second in the browser), and the L key switches it too. The state belongs to the page: every block and table of the page follows it, and the choice is kept per page in the browser.
LiveToggle Connecting to the DMS preview…
On a page declared without
live, the toggle renders nothing. The preview page is not a live page, so the screenshot shows the toggle as it looks on one.Usage
Place it where you want, typically in a toolbar next to a PeriodSelector:
src/pages/overview.ts
import { HStack, Spacer } from "@antelopejs/interface-dms/base/stack";
import { LiveToggle } from "@antelopejs/interface-dms/base/live-toggle";
import { PeriodSelector } from "@antelopejs/interface-dms/base/period-selector";
static toolbar = HStack({ alignment: "center" })
.child("spacer", Spacer())
.child("live", LiveToggle({ variant: "pill", missedLabel: "$api.live.new_requests" }))
.child("period", PeriodSelector({ id: "api" }));
Options
| Option | Type | Default | Description |
|---|---|---|---|
missedLabelContent | string | – | What the paused toggle calls the missed events, given {count}. |
alignAppearance | "left" | "center" | "right" | – | |
showUpdatedAtAppearance | boolean | – | Shows how long ago the page last read its data. |
variantAppearance | "segmented" | "pill" | – |
variant | Looks like |
|---|---|
segmented | Two segments, Live and Pause. The default. |
pill | A "Live" pill with a pulsing dot beside a Pause button, and a Resume button while paused. |
While paused
Paused, the toggle says why instead of the time: "Paused · typing in the Tester · 40 new requests · 2 in 5xx". The reason is the hold a component took (or "tab hidden"), the count is the page's missed events named by missedLabel (pluralised on {count}), and the breakdown is what a custom component adds with usePageLive().setMissedDetail().