Code block

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

# Local preview — no remote resources are created
name: platform-api
environment: demo-main
checks:
  - access.identity-control
  - access.env-allow
  - access.env-deny
labels:
  purpose: "한글과 공백을 보존하는 실행 예제"
  reference: "https://demo.example.invalid/api/deployments/environments/staging/projects/demo-e2e-01/build-logs?include=identity,roles,permissions,service-endpoints"
revision: 1

The source stays selectable when clipboard permission is denied.
<script>Example text is never executed.</script>

사용법

공백과 줄바꿈을 유지한 채 코드, 설정, 긴 식별자를 보여주고 선택·복사할 수 있게 하세요. 복사 버튼은 결과를 제자리에 표시합니다: Copied 또는 Copy unavailable. 콘텐츠는 기본적으로 가로로 스크롤됩니다. 문서에서는 wrap을 설정해 긴 줄만 줄바꿈되게 하세요.

• 구문 강조를 구문 검증이나 실행 결과로 오해하지 않게 하세요. 그런 결과는 따로 알리세요.
• 코드를 HTML로 주입하거나 실행하지 마세요. 대신 일반 소스 문자열을 code로 전달하세요.
• 거부된 클립보드 쓰기를 성공으로 취급하지 마세요. 실패 시 사용자 지정 onCopy가 throw하거나 reject하게 두면 버튼이 Copy unavailable을 표시합니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → toolbar(label + language + CopyButton, which also shows the result) + labeled ScrollArea(pre/code). CopyButton also stands alone beside any value.

키보드와 접근성

• Tab은 복사 버튼과 스크롤 영역에 도달합니다.
• Enter 또는 Space는 복사합니다. 결과가 버튼 라벨을 제자리에서 교체하므로 다른 것은 움직이지 않습니다: 성공 시 Copied, 실패 시 Copy unavailable.
• 실패 시 소스가 선택되어 키보드 복사 단축키를 쓸 수 있습니다.
• 소스를 바꾸면 결과가 지워지고, 늦은 응답이 새 소스의 상태를 덮어쓰지 않습니다.
• 라벨은 polite 라이브 영역이며 2초 후 액션으로 돌아갑니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { CodeBlock } from '@surflane/ui'

<CodeBlock
  label='Runner task'
  language='YAML'
  code={'name: platform-api\n  environment: staging\n'}
/>
<CodeBlock label='Wrapped source' code={source} wrap />

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰