feat(D 예정노선): 받기 진행 = 지도 귀퉁이 서클 · 끊김 = [다시 받기] · 겹 다시 받기 = 받은 범위 판정 · 보기 옮김 받지 않음 (PLAN 596-3 · 596-4 · 요구 463)
- 부품 progress 원에 corner 꼴(오른쪽 아래 · 글 왼쪽) · 부품 모음 견본 - 서버 다시 켜짐(끝 아닌데 멎음 · 진행 못 읽음) = 끊김 → [다시 받기] - 겹: 받은 범위(have) 바뀌면 새로 받음 · 등고 · 세류 주소에 범위 지문 &v= · 등고 자르는 상자 = 받은 범위 - 임도망 [올리기] 지도 겹 아이콘 줄에서 왼쪽 칸 단추로(Layers 가 uploadRoads 내줌) - Api: 받기 center · reset · 답 far · band 꼴 · 진행 interrupted · 임도망 bounds · distance_m(595 꼴) - 시험 553_4: 막대 대신 귀퉁이 서클 단언 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import "./ui_template_progress.css";
|
||||
* ui_template_progress.ts
|
||||
* 부품 「진행 막대」(552-3 · 목록 30) — 막대 · 쌓임 막대 · 원.
|
||||
* 꼴 = 막대(`createProgressBar` · 값 하나) · 쌓임 막대(`parts` · 갈래 셋 accent · soft · warn) · 원(`createProgressCircle` · 아래)
|
||||
* · 원 자리 = 흐름(기본) · 가운데 덮음(`overlay`) · 오른쪽 아래 귀퉁이(`corner` · 글은 원 왼쪽)
|
||||
* 크기 = 막대 굵기 6 · 8(`thick` → data-size) · 원 지름 72(기본)
|
||||
* 상태 = 기본 · 오류(`.is-error` · 막대가 위험색) · 판정(`tone`: warn · bad)
|
||||
* 쓰는 법 = `createProgressBar({ value: 0.4, label: "40 %" })` · `bar.set(0.8)` · `createProgressBar({ parts: [{ value: 3, tone: "accent" }, { value: 1, tone: "warn" }] })`
|
||||
@@ -28,6 +29,8 @@ export interface ProgressCircleOptions {
|
||||
label?: string;
|
||||
/** 컨테이너 정중앙에 띄우는 오버레이로 만든다(컨테이너는 position: relative 여야 한다). */
|
||||
overlay?: boolean;
|
||||
/** 컨테이너 오른쪽 아래 귀퉁이에 작게 띄운다(가운데를 안 가림 · 컨테이너는 position: relative). */
|
||||
corner?: boolean;
|
||||
}
|
||||
|
||||
export interface ProgressCircleHandle {
|
||||
@@ -40,7 +43,10 @@ export interface ProgressCircleHandle {
|
||||
|
||||
export function createProgressCircle(options: ProgressCircleOptions = {}): ProgressCircleHandle {
|
||||
const root = document.createElement("div");
|
||||
root.className = "ui-progress-circle" + (options.overlay ? " ui-progress-circle--overlay" : "");
|
||||
root.className =
|
||||
"ui-progress-circle" +
|
||||
(options.overlay ? " ui-progress-circle--overlay" : "") +
|
||||
(options.corner ? " ui-progress-circle--corner" : "");
|
||||
root.setAttribute("role", "status");
|
||||
root.setAttribute("aria-live", "polite");
|
||||
if (options.size) root.style.setProperty("--ui-progress-size", `${options.size}px`);
|
||||
|
||||
Reference in New Issue
Block a user