테두리 (Border)
v1의 테두리 두께 클래스를 그대로 제공해요. 색상은 지정하지 않으므로 currentColor를 따르며, 필요한 경우 color 또는 border-color를 함께 설정하세요. 값과 CSS는 검증된 legacy-utilities JSON에서 생성됩니다.
두께 클래스
border-0부터 border-4까지 요소의 네 방향에 solid 테두리를 적용해요. v1 문서에만 등장하고 실제 SCSS에는 없었던 border, border-top, border-none 클래스는 호환 API에 포함하지 않습니다.
.border-00.border-11px.border-22px.border-33px.border-44px| Class | CSS | Value |
|---|---|---|
.border-0 | border: 0 solid | 0 |
.border-1 | border: 1px solid | 1px |
.border-2 | border: 2px solid | 2px |
.border-3 | border: 3px solid | 3px |
.border-4 | border: 4px solid | 4px |
사용 예제
Border utility
<link rel="stylesheet" href="/assets/podo-ui/styles.css" />
<div class="border-2 r-4 utility-card">Border utility</div>플랫폼 지원
웹 계열 프레임워크는 동일한 배포 CSS를 공유합니다. React Native에는 CSS 클래스 개념이 없으므로 토큰과 style prop을 사용하세요.
| Platform | Support | Usage |
|---|---|---|
| HTML / CSS | 지원 | podo-ui/styles.css를 로드하고 class="…" 사용 |
| React · Next.js | 지원 | className="…" 사용 |
| Hono CSR | 지원 | React island에서 className 사용 |
| Hono SSR | 지원 | 서버 HTML에 class를 직접 출력 |
| React Native | 미지원 | CSS class 대신 style prop과 Podo 토큰 사용 |