ActionToolbar

@hua-labs/ui

v1.1.0

선택 모드, 일괄 액션, 반응형 레이아웃을 지원하는 범용 액션 툴바입니다. 알림, 로그, 대시보드 관리에 적합합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ActionToolbar } from "@hua-labs/hua";

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

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

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

Pro

라이브 데모

일반 모드

선택 버튼을 클릭하면 선택 모드로 전환됩니다. 전체 선택/해제, 일괄 삭제 등의 액션을 수행할 수 있습니다.

ActionButton Interface

interface ActionButton {
  label: string;
  labelMobile?: string;
  icon?: IconName;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'default' | 'outline' | 'destructive' | 'ghost';
  badge?: { count: number; color?: 'blue' | 'red' | 'gray' | 'green' };
}

Props

이름	타입	기본값	설명
`isSelectMode`	`boolean`	`false`	Enable select mode
`totalCount`	`number`	`0`	Total item count
`selectedCount`	`number`	`0`	Selected item count
`actions`	`ActionButton[]`	-	Normal mode action buttons
`selectModeActions`	`ActionButton[]`	-	Select mode action buttons
`onToggleSelectMode`	`() => void`	-	Toggle select mode callback
`onToggleSelectAll`	`() => void`	-	Toggle select all callback
`onCancelSelect`	`() => void`	-	Cancel select mode callback
`loading`	`boolean`	`false`	Loading state

Code Examples

기본 사용법tsx

1import { ActionToolbar } from '@hua-labs/ui';
2 
3<ActionToolbar
4  totalCount={10}
5  actions={[
6    {
7      label: "새로 만들기",
8      icon: "plus",
9      onClick: handleCreate,
10    },
11    {
12      label: "새로고침",
13      icon: "refresh",
14      onClick: handleRefresh,
15    },
16  ]}
17  onToggleSelectMode={() => setIsSelectMode(true)}
18/>

선택 모드tsx

1<ActionToolbar
2  isSelectMode={isSelectMode}
3  totalCount={notifications.length}
4  selectedCount={selectedIds.size}
5  actions={[
6    {
7      label: "모두 읽음",
8      icon: "check",
9      onClick: handleMarkAllAsRead,
10      badge: { count: unreadCount, color: 'blue' }
11    }
12  ]}
13  selectModeActions={[
14    {
15      label: "선택 삭제",
16      icon: "delete",
17      onClick: handleDeleteSelected,
18      variant: "destructive",
19      badge: { count: selectedIds.size, color: 'red' }
20    }
21  ]}
22  onToggleSelectMode={() => setIsSelectMode(true)}
23  onToggleSelectAll={handleToggleSelectAll}
24  onCancelSelect={() => {
25    setIsSelectMode(false);
26    setSelectedIds(new Set());
27  }}
28/>

접근성

•:
•:

Bookmark