ActionToolbar

v1.1.0

bash

npm install @hua-labs/hua

tsx

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

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' };
}


`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/hua';
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