일괄 선택

일괄 선택 (Bulk selection)

일괄 선택(bulk selection)은 목록, 테이블, 카드 뷰 같은 콘텐츠 뷰에서 사용자가 여러 항목을 선택하거나 선택 해제할 수 있게 해줘요.

출처: 문서

본문

일괄 선택기 (Bulk selector)

콘텐츠 뷰의 툴바에 일괄 선택 컨트롤을 추가할 수 있어요. 이 컨트롤(일괄 선택기)은 split button 컴포넌트를 통해 선택을 제어할 수 있게 해줘요. 일괄 선택기는 또한 관련 콘텐츠의 선택 상태를 반영하는데, 부분 선택(partial selection), 전체 선택(full selection), 또는 선택 없음(no selection)을 포함해요.

일괄 선택기(Bulk selector): 선택 체크박스와 드롭다운 메뉴 토글을 결합한 split button이에요.
메뉴(Menu): 관련 콘텐츠 뷰에 대한 일괄 선택 옵션 목록이에요. 일괄 선택 메뉴에는 다음 옵션이 포함되어야 해요:
- "Select none": 이전 선택을 지웁니다. 선택된 것이 없다면 이 옵션은 비활성화되어야 합니다.
- "Select page": 현재 페이지의 모든 항목을 선택합니다(페이지네이션 사용 시).
- "Select all": 모든 페이지의 모든 항목을 선택합니다. 이는 구현에서 지원되지 않는 경우 생략할 수 있습니다.
- (선택 사항) "Running VMs", "Errors" 등 미리 결정된 필터 기준과 일치하는 추가 메뉴 항목.
체크박스(Checkbox): 항목의 현재 선택 상태를 반영하는 컨트롤이에요. 체크박스 상태는 일괄 선택기 메뉴 선택에 의해 자동으로 업데이트되지만, 수동으로 선택할 수도 있어요. 일괄 선택기의 체크박스를 수동으로 클릭하면 관련 콘텐츠 뷰의 모든 항목이 선택됩니다.
선택된 항목 개수(Selected item count): 선택된 항목의 총 개수를 반영하는 텍스트 라벨이에요. 페이지네이션을 사용한다면 모든 페이지에 걸쳐 선택된 항목 수를 반영합니다.
선택된 체크박스(Selected checkbox): 항목이 선택되었음을 나타냅니다. 체크박스에 부분 선택(대시) 또는 전체 선택(체크 표시)이 표시될 수 있어요. 체크박스 동작에 대한 자세한 내용은 checkbox states를 참고하세요.
빈 체크박스(Empty checkbox): 항목이 선택되지 않았음을 나타냅니다.

용도 (Usage)

툴바에서의 선택 (Selection in toolbars)

일괄 선택기는 보통 페이지네이션을 사용하는 테이블의 툴바에 배치됩니다.

이 예시에서 데이터셋에는 10개 페이지에 걸쳐 총 50개 항목이 있습니다. 첫 페이지만 선택되었으므로 체크박스 전반에 부분 선택이 반영됩니다. 사용자는 일괄 선택 체크박스, 일괄 선택 메뉴, 또는 행의 체크박스 클릭을 통해 추가 항목을 선택(또는 선택 해제)할 수 있습니다. 선택이 변경될 때마다 선택된 항목 개수가 업데이트됩니다.

전역 액션을 위한 선택 (Selection for global actions)

일괄 선택은 여러 항목을 선택하고 그에 대해 액션을 수행하는 데 종종 사용됩니다. 이러한 경우 선택 상태는 사용자가 의도적으로 선택을 변경할 때까지—액션이 완료된 후에도—유지됩니다.

테이블을 위한 통합 선택 (Integrated selection for tables)

테이블은 헤더 행에 통합 일괄 선택을 기본적으로 포함합니다.

테이블 헤더 행의 체크박스는 테이블의 모든 항목(또는 페이지네이션 사용 시 현재 페이지의 모든 항목)을 선택하거나 선택 해제합니다.

테이블에 툴바가 없을 때만 통합 일괄 선택을 사용하길 권장합니다. 툴바가 있다면 대신 툴바를 통해 일괄 선택을 제어하는 것을 기본으로 해야 합니다. 이는 선택된 항목 수의 가시성을 더 잘 제공하고, 뷰 유형 간 일관성을 더 잘 유지하며, 더 많은 선택 유연성을 허용합니다.

참고: 테이블 컴포넌트에서 통합 일괄 선택을 숨기고 툴바 컨트롤을 활성화하려면 canSelectAll prop을 "false"로 설정하세요.

동작 (Behavior)

체크박스 상태 (Checkbox states)

일괄 선택으로 인해 발생할 수 있는 몇 가지 체크박스 상태가 있습니다:

비활성(Disabled): 상호작용할 수 없음.
부분 선택(Partial selection): 항목이 부분 선택의 일부임을 나타내기 위해 minus 아이콘을 사용합니다. 즉 일부 항목만 선택되었음을 의미합니다.
선택 안 됨(Unchecked): 항목이 선택되지 않았음을 나타냅니다.
전체 선택(Full selection): 항목이 전체 선택의 일부임을 나타내기 위해 check mark 아이콘을 사용합니다. 콘텐츠 뷰에서 모든 항목이 선택된 상태입니다.

선택된 항목 없음 (No items selected)

체크박스: 비어 있음. 클릭하면 모든 항목을 선택합니다.
메뉴 토글: 선택 메뉴를 열고 닫습니다.
메뉴: 선택 옵션을 표시합니다. 선택된 항목이 없으므로 "Select none"이 비활성화됩니다.

일부 항목 선택됨 (Some items selected)

체크박스: minus 아이콘이 채워져 있음. 클릭하면 선택된 모든 항목을 선택 해제합니다.
텍스트 라벨: 선택된 항목 수를 표시합니다. 클릭하면 선택 메뉴를 열고 닫습니다.
메뉴 토글: 선택 메뉴를 열고 닫습니다.
메뉴: 선택 옵션을 표시합니다.

다음 가이드는 서로 다른 선택 상태에 대한 일괄 선택기의 동작을 설명합니다.

모든 항목 선택됨 (All items selected)

체크박스: check mark 아이콘이 채워져 있음. 클릭하면 선택된 모든 항목을 선택 해제합니다.
텍스트 라벨: 선택된 항목 수를 표시합니다. 클릭하면 선택 메뉴를 열고 닫습니다.
메뉴 토글: 선택 메뉴를 열고 닫습니다.
메뉴: 선택 옵션을 표시합니다.

배치 (Placement)

툴바에서 사용될 때 일괄 선택기는 첫 번째 항목이어야 합니다.