컴포넌트
Separator
콘텐츠 영역을 구분합니다.
설치
pnpm dlx ply-ui add separator공통 설치 설정을 먼저 적용합니다.
사용법
내용 사이를 구분합니다. 기본 방향은 가로이며 orientation="vertical"로 세로 구분선을 표시합니다.
세로 방향
세로 구분선은 높이가 있는 flex 영역 안에 배치합니다.
구현 코드
components/ui/separator.tsx
"use client";
import type { ComponentProps } from "react";
import { Separator as Primitive } from "@base-ui/react/separator";
import { withClassName } from "../../lib/cx";
import "./separator.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function Separator({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive
{...props}
className={withClassName("rbx-separator", className)}
/>
);
}
components/ui/separator.css
/* Separator: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */