컴포넌트
Empty
표시할 데이터가 없을 때 안내합니다.
설치
pnpm dlx ply-ui add empty button공통 설치 설정을 먼저 적용합니다.
사용법
표시할 데이터가 없을 때 제목, 설명, 작업 버튼을 배치하는 section입니다. 자체 상태나 데이터 조회 기능은 없습니다.
구현 코드
components/ui/empty.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./empty.css";
export function Empty({ className, ...props }: ComponentProps<"section">) {
return <section {...props} className={cx("rbx-empty", className)} />;
}
components/ui/empty.css
@layer theme, base, components, utilities;
@layer components.ply-base, components.ply;
@layer components.ply {
/* empty — semantic HTML composition. */
.rbx-empty {
text-align: center;
padding: 48px 24px;
border: 1px dashed var(--rbx-color-stroke-emphasis);
border-radius: 16px;
color: var(--rbx-color-content-default);
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
padding-inline: clamp(12px, 5%, 24px);
}
}