`ChartMarkerDetail`型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

What hoshi-marker says: a marker was clicked, tapped, or chosen with Enter or Space while it had the focus.

インポート

import type { ChartMarkerDetail } from "@johnmorrisdotca/hoshi-stars/chart/element";

定義

interface ChartMarkerDetail {
    marker: SkyMarker;
    id: string;
    index: number;
    source: "pointer" | "key";
}

メンバー

名前	型	説明
`marker`	`SkyMarker`	The marker, as the page gave it (the same object when it was set as a property).
`id`	`string`	The marker's `id`, or `m<position>` when it has none.
`index`	`number`	Its position in `markers`.
`source`	`"pointer" \| "key"`	`pointer` for a click or a tap, `key` for Enter or Space on a marker that has the focus.

例

import type { ChartMarkerDetail } from "@johnmorrisdotca/hoshi-stars/chart/element";

document.querySelector("hoshi-chart")!.addEventListener("hoshi-marker", (event) => {
  const { marker, id, source } = (event as CustomEvent<ChartMarkerDetail>).detail;
  console.log(id, marker.label ?? "", source);
});

ソースを見る GitHub で編集@johnmorrisdotca/hoshi-stars 0.47.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

ChartMarkerDetail型

定義

メンバー

例

`ChartMarkerDetail`型