콘텐츠 / code-block
CodeBlock
복사 버튼이 있는 클라이언트 코드 블록.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
복사 버튼이 있는 클라이언트 코드 블록.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
코드 문자열을 <pre><code> 로 렌더하고, 헤더에 filename/language 라벨과 Copy 버튼을 둔다(클라이언트 컴포넌트 — clipboard API 사용). 복사 성공 시 버튼 라벨이 1.4초간 ‘Copied’ 로 바뀐다. 헤더는 language·filename·showCopy 중 하나라도 있을 때만 렌더된다. 문법 하이라이팅은 하지 않는다 — 토큰 색이 필요하면 서버 컴포넌트 ServerCodeBlock 을 사용.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
기본 (filename + copy)
import { CodeBlock } from "@axe/ui";<CodeBlock filename="deploy.sh" code={`axe work docs slugcd ~/.worktrees/docs/slugaxe ship docs`}/>복사 버튼 없이
import { CodeBlock } from "@axe/ui";<CodeBlock language="json" showCopy={false} code={`{ "port": 4212 }`} />CSS-only (프레임만 — copy 는 JS 필요)
<div class="axe-codeblock"> <div class="axe-codeblock__header"> <span class="axe-codeblock__lang">deploy.sh</span> </div> <pre class="axe-codeblock__pre"><code>axe ship docs</code></pre></div>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
code | string | 필수 | — | 표시·복사할 코드 문자열. |
language | string | — | — | 헤더 라벨(filename 없을 때). 하이라이팅에는 쓰이지 않음. |
showCopy | boolean | — | true | Copy 버튼 표시 여부. false 여도 language/filename 있으면 헤더는 렌더. |
filename | string | — | — | 헤더 라벨(language 보다 우선). |
...rest | React.HTMLAttributes<HTMLDivElement> | — | — | className 병합 후 나머지 속성은 루트 <div> 로 전파. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-codeblock | stable | 블록 루트 <div>. |
.axe-codeblock__header | stable | 라벨 + copy 버튼 헤더 행. |
.axe-codeblock__lang | stable | filename/language 라벨. |
.axe-codeblock__copy | stable | Copy 버튼. |
.axe-codeblock__pre | stable | 코드 본문 <pre>. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
Keyboard
- Tab 으로 Copy 버튼 포커스
- Enter/Space 로 복사
ARIA
Copy 버튼은 aria-label="Copy code" 를 가진 네이티브 <button type="button">. 복사 성공/실패는 버튼 텍스트(Copy↔Copied)로 시각 피드백된다. clipboard API 실패 시 조용히 무시(에러 throw 없음).
Notes
복사 상태 텍스트 변화가 스크린리더에 즉시 announce 되지는 않는다(live region 미사용).
06 · Judgment