Web Component

<iso-ledger>

기록을 장부처럼 한 장씩 쌓습니다. 배열 순서가 시간 순서이고 마지막 항목(가장 최근)이 맨 위에 놓입니다. selected로 고른 장은 오른쪽으로 빠져나옵니다.

예시

릴리스 기록, 세 번째 장(v1.2) 선택 (예시 데이터). 장을 누르면 그 장이 선택되고, 선택된 장을 한 번 더 누르면 선택이 풀립니다.

속성

속성	형식	의미
`data`	JSON	기록 배열(오래된 것부터). 잘못된 JSON이면 그리지 않고 `console.error` 후 오류 문구를 보인다
`selected`	정수(인덱스)	빼낼 장. 없으면 아무 장도 빼지 않는다. 엘리먼트가 클릭·Enter에 맞춰 스스로 바꾸며, 그 장 블록에 `aria-pressed="true"`를 단다
`unit`	숫자(px)	`--iso-u` 값. 기본 24
`label`	문자열	접근성 캡션(`aria-label`과 숨김 표 `caption`)
`renderer`	`css` \| `svg` \| `auto`	그리는 방식. 기본 `auto`(그 밖의 값도 같음): 블록 200개 이하면 CSS 면, 넘으면 SVG. `css`·`svg`는 블록 수와 무관하게 고정. 렌더링 방식

장 두께는 값이 아니라 고정이므로 max와 height-units는 장부 모양에 영향을 주지 않습니다.

data 항목

키	형식	의미
`k`	문자열 · 필수	장 이름(예: 버전)
`note`	문자열 · 선택	설명. 라벨에 `"k · note"`로 붙는다

이벤트

장을 누르거나 Enter·Space를 누르면 iso-select(detail: { index, item })가 버블링됩니다. 엘리먼트는 이 이벤트로 selected를 먼저 바꿔 두므로(같은 장이면 지움), 바깥에서는 selected 속성을 읽어 화면을 맞추면 됩니다.

const ledger = document.querySelector("iso-ledger");
ledger.addEventListener("iso-select", () => {
  const s = ledger.getAttribute("selected"); // null이면 선택 해제
  console.log(s == null ? "선택 없음" : "선택: " + s);
});

장마다 포커스를 받고, 선택 여부를 aria-pressed로 알립니다. 화면의 선택 강조도 같은 aria-pressed="true"에서 나옵니다 — 오른쪽으로 빠지고(CSS 경로에서는 미끄러지듯, SVG 경로에서는 바로), 살짝 들리고(--iso-lift, 동작 줄이기에서는 들리지 않음), 실선 윤곽이 생깁니다. 그 장에 키보드 포커스가 있으면 포커스의 점선 윤곽이 대신 보입니다.
숨김 표가 모든 장의 이름과 설명을 담습니다.
선택은 위치(빠져나옴)로 보입니다. 고른 장의 내용은 화면의 글로도 함께 보여 주세요 — 버전 기록 뷰어가 그 예입니다.

<iso-ledger>

예시

속성

data 항목

이벤트

접근성