Toolbar

@hua-labs/ui/interactive

v1.0.0

제목, 설명, 날짜 범위 선택, 필터, 액션이 포함된 대시보드 페이지용 툴바 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Toolbar } from "@hua-labs/ui/interactive";

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

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

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

라이브 데모

기본 사용법

Transactions Dashboard

View all transaction data

액션 포함

Revenue Analytics

업데이트: 2 minutes ago

날짜 범위

Settlement History

변형

variant="cards"

Card Style

With border and shadow

variant="plain"

Plain Style

Simple style without border

Props

이름	타입	기본값	설명
`title`	`React.ReactNode`	-	Toolbar title
`description`	`React.ReactNode`	-	Toolbar description
`meta`	`React.ReactNode`	-	Meta information
`variant`	`"plain" \| "cards"`	`"cards"`	시각적 스타일 변형
`dateRange`	`DateRangeConfig`	-	Date range configuration
`filters`	`React.ReactNode`	-	Filter components
`actions`	`ToolbarAction[]`	-	Action buttons
`onRefresh`	`() => void`	-	Refresh callback
`lastUpdated`	`string`	-	Last updated timestamp

ToolbarAction

Props

이름	타입	기본값	설명
`label*`	`string`	-	Action label
`onClick`	`() => void`	-	클릭 핸들러
`href`	`string`	-	Link URL
`icon`	`IconName \| React.ReactNode`	-	Action icon
`appearance`	`"primary" \| "secondary" \| "ghost"`	`"secondary"`	Button appearance
`loading`	`boolean`	-	Loading state

DateRangeConfig

Props

이름	타입	기본값	설명
`value`	`{ from: Date; to: Date } \| null`	-	Selected date range
`presets`	`DatePreset[]`	-	Preset options
`onSelectPreset`	`(preset: DatePreset) => void`	-	Preset selection callback
`onCustomRange`	`() => void`	-	Custom range callback
`display`	`string`	-	Display text

코드 예시

기본 사용법

BasicToolbar.tsxtsx

import { Toolbar } from "@hua-labs/ui/interactive";

export function BasicToolbar() {
  return (
    <Toolbar
      title="Transactions Dashboard"
      description="View all transaction data"
      actions={[
        { label: "Export", icon: "download", onClick: () => {} },
        { label: "Filter", icon: "funnel", onClick: () => {} }
      ]}
      onRefresh={() => console.log("Refresh")}
    />
  );
}

날짜 범위

ToolbarWithDateRange.tsxtsx

import { Toolbar } from "@hua-labs/ui/interactive";

export function ToolbarWithDateRange() {
  return (
    <Toolbar
      title="Revenue Analytics"
      dateRange={{
        value: { from: new Date("2024-01-01"), to: new Date("2024-12-31") },
        display: "Jan 1, 2024 - Dec 31, 2024",
        presets: [
          { label: "Today", value: "today" },
          { label: "This Week", value: "thisWeek" },
          { label: "This Month", value: "thisMonth" }
        ],
        onSelectPreset: (preset) => console.log(preset),
        onCustomRange: () => console.log("Custom range")
      }}
      lastUpdated="Just now"
    />
  );
}

DashboardSidebarPro TransactionsTablePro