Skip to content
Docs
컴포넌트로 돌아가기

DashboardGrid

@hua-labs/ui/data
v1.0.0

대시보드 위젯과 카드를 구성하기 위한 반응형 그리드 레이아웃 컴포넌트입니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { DashboardGrid } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법 (3 columns)

Revenue

₩10M

Orders

1,234

Users

567

변형

columns=2
Item 1

100

Item 2

200

columns=3
Item 1

100

Item 2

200

Item 3

300

Gap Variations

gap="sm"
A

1

B

2

C

3

gap="md"
A

1

B

2

C

3

gap="lg"
A

1

B

2

C

3

gap="xl"
A

1

B

2

C

3

Fixed Grid (Non-responsive)

1

A

2

B

3

C

4

D

Props

이름타입기본값설명
columns1 | 2 | 3 | 4 | 5 | 64Number of columns
gap"sm" | "md" | "lg" | "xl""md"Gap between items
responsivebooleantrueEnable responsive breakpoints
children*React.ReactNode-Grid children
dotstring-
styleReact.CSSProperties-

코드 예시

기본 사용법

BasicDashboardGrid.tsxtsx
import { DashboardGrid, StatCard } from "@hua-labs/ui/data";

export function BasicDashboardGrid() {
  return (
    <DashboardGrid columns={3}>
      <StatCard title="Revenue" value="₩10M" />
      <StatCard title="Orders" value="1,234" />
      <StatCard title="Users" value="567" />
    </DashboardGrid>
  );
}

반응형

ResponsiveGrid.tsxtsx
import { DashboardGrid, MetricCard } from "@hua-labs/ui/data";

export function ResponsiveGrid() {
  return (
    <DashboardGrid columns={3} gap="lg" responsive>
      <MetricCard title="Daily Visitors" value="2,345" />
      <MetricCard title="Page Views" value="12,456" />
      <MetricCard title="Avg. Time" value="3m 42s" />
    </DashboardGrid>
  );
}