Menu

원본: projects/skill-lens/design/components/Menu/README.md

상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗

행 끝 더 보기: PC 팝오버, 폰 시트

견본만 새 창으로

행이나 머리의 "더 보기"를 누르면 나오는 행동 목록입니다.

쓰는 곳

표의 행 끝, 서랍 머리.

구성(화면이 넘겨줄 것)

항목(이름, 위험 여부, 비활성 이유).

규칙

• 항목은 일곱까지. 위험한 행동(삭제, 제외)은 맨 아래에 구분선 뒤, danger 글자.
• 지금 상태에서 할 수 없는 행동은 숨기지 않고 흐리게 + 이유.
• PC는 팝오버, 폰은 BottomSheet 목록.
• 항목 글은 명사형 2~4자.

접근성

• role="menu", 항목 menuitem. 위아래 화살표, Esc로 닫고 포커스는 연 버튼으로.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Actions" height=190 subtitle="행 끝 더 보기: PC 팝오버, 폰 시트" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<div class="sl-menu" role="menu"><button class="sl-menu__item" role="menuitem">독려</button><button class="sl-menu__item" role="menuitem">재진단</button><button class="sl-menu__item" role="menuitem" aria-disabled="true">결과보기<small>검토완료 뒤</small></button><hr class="sl-menu__sep"><button class="sl-menu__item sl-menu__item--danger" role="menuitem">제외</button></div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.