스타일시트 예제
스타일시트의 작동 예제와 작성 인터페이스입니다.
CSS 지시문이 출력 스타일시트를 바꾸는 경우 StylesheetExample을 사용하세요. 서버는 현재 프리셋으로 리터럴 소스를 컴파일하고 필요한 변수와 keyframes를 포함한 전체 결과를 표시합니다. 이 쌍은 DocumentCodeExample을 재사용하며 키보드 복사, 보이는 포커스, 클립보드 피드백을 제공합니다. 페이지에서 시각 효과를 실행하지 않습니다.
네이티브 규칙에서 사용하는 토큰
@theme { --color-brand: #4f46e5;}.card { background-color: var(--color-brand);}생성된 CSS
.card { background-color: var(--color-brand);}@layer theme { :root, :host { --color-brand: #4f46e5 }}안전 목록에 등록한 토큰
@theme { --color-brand: #4f46e5;}@safelist "bg-brand";생성된 CSS
@layer theme { :root, :host { --color-brand: #4f46e5 }}@layer utilities { .bg-brand { background-color: var(--color-brand) }}일치하는 클래스가 없는 리소스
@layer theme { :root, :host { --color-brand: #4f46e5; }}@keyframes fade-in { to { opacity: 1; }}생성된 CSS
@layer theme { :root, :host { --color-brand: #4f46e5; }}@keyframes fade-in { to { opacity: 1; }}- selector
테마 선언 안의 명시적인 네이티브 선택자입니다.
<StylesheetExample title="A safelisted color token" source={"@theme { --color-brand: #4f46e5; }\n\n@safelist \"bg-brand\";"}/>컴포넌트는 제목과 독립적인 CSS 소스를 받습니다. 여러 파일이 필요한 import, reference, 에셋에는 픽스처 기반 예제를 사용하세요. 컴파일러는 서버에 두고 소스와 결과의 모든 줄을 이식 가능한 Markdown에 유지하며 코드는 자체 블록 안에서 스크롤되게 하세요. 빌드 오류는 문서 검사에서 반드시 드러나야 합니다.
위의 토큰, safelist, 네이티브 리소스 예제는 같은 표현을 공유합니다. DocumentOptions는 설명에 인라인 코드와 링크도 받으며 이름과 선택적 기본값은 따로 유지합니다. 두 컴포넌트 모두 측정용 데모 레이아웃 밖에 두세요.