도구 예제

긴 식별자에는 읽기 쉬운 옵션 목록을 사용하고 도구를 설명할 때는 레이블이 있는 소스/결과 쌍을 사용하세요. 이 픽스처는 표현 상태를 보여 줍니다. lint와 언어 서비스 출력으로 검증한 예제는 제품 Guide에서 관리합니다.

showDescriptions

기본값 true

Keep the explanation beside each entry.

headingLevel

기본값 3

Choose a heading level that fits the document.

caption

Describe what the reader should notice.

<button>Save</button>

<button type="button">Save</button>

.card { width: red; }

<div class="flex"></div>

.flex { display: flex; }

DocumentOptions는 각 식별자를 선택적 기본값과 설명 위에 배치합니다. 네이티브 정의 목록 의미 구조를 사용하며 긴 이름과 값은 줄바꿈되어 설명을 좁은 표 셀에 밀어 넣지 않습니다. MDX에 본문을 직접 작성할 때는 DocumentOptionList와 DocumentOptionEntry를 조합하세요. 문단, 링크, 인라인 코드는 이식 가능한 문서에도 남습니다.

<DocumentOptionList label="Component interfaces">  <DocumentOptionEntry name="DemoSurface">    **Interface:** `elevation`, native div props.    A bordered surface with no implicit layout or padding. Elevation is opt-in.  </DocumentOptionEntry></DocumentOptionList>

문서 목록은 측정 대상 밖에 두세요. 각 항목은 하나의 용어와 설명을 가지며 별도의 인터페이스 세부 사항과 레이아웃 제약은 일반 문단으로 설명하세요.

<DocumentOptions label="Feature settings" options={[  {    name: 'masterCSS.suggestSyntax',    defaultValue: 'true',    description: 'Offer contextual completion items.'  }]} />

DocumentCodeExample은 공유 구문 강조를 재사용합니다. 소스만 있는 예제는 오류나 경고를 표시할 수 있고, 쌍으로 된 예제는 소스와 결과에 서로 다른 언어를 사용할 수 있습니다. 각 블록은 키보드로 접근 가능한 복사 버튼과 클립보드 피드백을 제공하며 복사가 불가능해도 읽을 수 있습니다.

<DocumentCodeExample  title="A stable class order"  language="mcss"  source="p-md flex"  result="flex p-md"  sourceLabel="Before sorting"  resultLabel="After sorting"/>

완전하고 검증된 문자열을 사용하세요. 코드는 공백을 유지하고 자체 블록 안에서 스크롤될 수 있으며 옵션 설명은 유연하게 줄바꿈됩니다. 두 컴포넌트 모두 측정하는 CSS 학습의 flex나 grid 영역 안에 두지 마세요. 콘텐츠 내보내기 어댑터에서도 전체 텍스트를 유지하세요.

정렬, 정규 형식, 충돌, 진단 변형은 코드 lint를, 완성, 호버, 포매터 출력은 언어 서비스를 참고하세요.