eomsangdonandClaude Opus 5.5
f941ddc3f5
- 작업 화면 틀(overlay): 왼쪽 패널 = 흰 판 + 1 px 선 · 그림자 없음 · 덮개 = --color-scrim · 손잡이 강조색 그대로 · 자리 · 폭 그대로 - 일반 화면 틀 createPageFrame(대시보드 세부 꼴) · 공개 화면 틀 createPublicFrame(A01 hero · section 꼴) - 단계 줄 data-size 28 · 40 · 상태 = 공통 값 · 패널 머리 createPanelHead · 목록 줄 createListRow(옛 .ui-sidebar-row 겉 함께) - 부품 모음: 떠 있는 판 · 서랍 · 도구줄 · 단계 줄 · 패널 머리 · 목록 줄 여섯 줄을 frame 묶음으로 옮김 · 견본 = ui_template_ui_kit_frames.ts - 지킴 시험 test_552_4_frames.py · B02~B09 · D · E · M02 전후 자리 수치 같음 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_panel_head.ts
|
|
* 패널 머리 `panel-head`(552-4 틀) — 판 · 카드 · 구역 맨 위 한 줄: 제목 · 부제 · 오른쪽 단추.
|
|
* 꼴 = 제목만 · 제목 + 부제(둘째 줄 흐린 글) · 오른쪽 단추 자리(actions) · 밑줄(divider)
|
|
* 크기 = data-size 32(줄 높이 최소 32) · 제목 = --text-body-sm 600 · 부제 = --text-caption
|
|
* 상태 = 없음(안 단추가 제 상태를 가짐)
|
|
* 쓰는 법 = card.prepend(createPanelHead({ title: "배수관", sub: "3 개", actions: [btn] }).root)
|
|
* 대신하는 옛 변종 = `.ui-general-block__section-header` · `.ui-side-panels__head` ·
|
|
* `b03-file__group` 제목 · `.b08-hydro__h2` · `.b08-sheets__title` · `e02-card__head` · `e03-card__head` · `m01-head`
|
|
* ========================================================================== */
|
|
|
|
import "./ui_template_panel_head.css";
|
|
|
|
export interface PanelHeadOptions {
|
|
title: string;
|
|
sub?: string;
|
|
actions?: HTMLElement[];
|
|
/** 아래 1 px 선 */
|
|
divider?: boolean;
|
|
/** 제목 태그 — 기본 h3 */
|
|
level?: 2 | 3 | 4;
|
|
}
|
|
|
|
export interface PanelHead {
|
|
root: HTMLElement;
|
|
title: HTMLElement;
|
|
actions: HTMLElement;
|
|
setTitle: (text: string) => void;
|
|
}
|
|
|
|
export function createPanelHead(opts: PanelHeadOptions): PanelHead {
|
|
const root = document.createElement("header");
|
|
root.className = "ui-panel-head";
|
|
root.dataset.size = "32";
|
|
if (opts.divider) root.classList.add("ui-panel-head--divider");
|
|
const text = document.createElement("div");
|
|
text.className = "ui-panel-head__text";
|
|
const title = document.createElement(`h${opts.level ?? 3}`);
|
|
title.className = "ui-panel-head__title";
|
|
title.textContent = opts.title;
|
|
text.append(title);
|
|
if (opts.sub) {
|
|
const sub = document.createElement("p");
|
|
sub.className = "ui-panel-head__sub";
|
|
sub.textContent = opts.sub;
|
|
text.append(sub);
|
|
}
|
|
const actions = document.createElement("div");
|
|
actions.className = "ui-panel-head__actions";
|
|
actions.append(...(opts.actions ?? []));
|
|
root.append(text, actions);
|
|
return { root, title, actions, setTitle: (t) => void (title.textContent = t) };
|
|
}
|