컴포넌트
Typography
제목, 본문, 코드를 표시합니다.
설치
pnpm dlx ply-ui add typography공통 설치 설정을 먼저 적용합니다.
사용법
Heading/Text/Code를 필요한 곳에 사용합니다.
현재 Heading은 h2입니다. 다른 제목 계층이 필요하면 컴포넌트의 태그를 확장하거나 원하는 제목 태그에 rbx-heading 클래스를 적용합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Heading | 제목을 표시합니다. 기본 요소는 h2입니다. |
Text | 본문 단락입니다. |
Code | 문장 안의 코드나 속성 이름입니다. |
제목
Heading은 h2 요소를 사용합니다. 페이지의 제목 계층에 맞게 배치합니다.
본문
Text는 본문 단락을 표시합니다.
인라인 코드
Code는 문장 안의 코드나 속성값을 표시합니다.
구현 코드
components/ui/typography.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./typography.css";
export function Heading({ className, ...props }: ComponentProps<"h2">) {
return <h2 {...props} className={cx("rbx-heading", className)} />;
}
export function Text({ className, ...props }: ComponentProps<"p">) {
return <p {...props} className={cx("rbx-text", className)} />;
}
export function Code({ className, ...props }: ComponentProps<"code">) {
return <code {...props} className={cx("rbx-code", className)} />;
}
components/ui/typography.css
/* typography — semantic HTML composition. */
.rbx-heading {
font: var(--rbx-typography-heading-medium-font);
letter-spacing: var(--rbx-typography-heading-medium-letter-spacing);
}
.rbx-text {
color: var(--rbx-color-content-default);
font: var(--rbx-typography-body-large-font);
}
.rbx-code {
font:
0.875rem/1.6 ui-monospace,
monospace;
padding: 2px 6px;
background: var(--rbx-color-shift-200);
border-radius: 4px;
}