Web - BulkActionBar (Added in 2.0)

Added in 2.0

AdminList에 포함된 컴포넌트입니다.

Definition

Principle

BulkActionBar는 단독으로 사용할 수 없으며, AdminList에 위치시켜야 합니다.

• AdminList에서 selectMode의 multi를 사용할 시, Bulk Action Bar가 생깁니다.

• BulkActionBar에 사용되는 Dropdown과 Button은 서로 연관성이 있는 것이 아닌 개별 요소입니다.

• ToolBar와 BulkActionBar는 공존할 수 없다는 원칙은 유지 되어야함

• 단, BulkActionBar는 이름 그대로 벌크 액션이 있을 때 노출할 것

  • 선택된 개수만 보여지는 상황은 벌크 액션바가 아닌, 모달의 버튼 등 다른 UI에서 개수를 표현하자

  • 기존에 선택된 항목이 있을 때에도 벌크 액션바는 노출하지 않는다.

구성

기획서 WF 작성 방법 참고

• ToolBar와 BulkActionBar는 동시에 존재할 수 없으나(BulkActionBar가 나오면 ToolBar는 숨김처리됨) WF상 기입은 함께 해야 합니다.

• ToolBar 또는 BulkActionBar 둘 중 하나만 존재해도 흰색 박스를 표현해야 합니다.

Spec

Guide

Size, Property

[간격 가이드]

전체가 다 조합되었을 때 배치 순서 : Header Bar - TextLabel - Bulk Action Bar/ToolBar - Header Row

• BulkActionBar와 ToolBar는 동시에 존재할 수 없습니다. BulkActionBar가 활성화 되면 ToolBar는 숨겨집니다.

Color 구성

Color Key

Properties

itemCount

선택된 AdminListItem 갯수입니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

dropdownMode

드롭다운의 사용 갯수를 결정합니다.

기획 지시사항

• 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

dropdown1Value

드롭다운의 값입니다. (예외 상황이 있을 때 원래 값이나 다른 값을 설정하기위해 주로 쓰입니다.)

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown2Value

드롭다운의 값입니다. (예외 상황이 있을 때 원래 값이나 다른 값을 설정하기위해 주로 쓰입니다.)

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown3Value

드롭다운의 값입니다. (예외 상황이 있을 때 원래 값이나 다른 값을 설정하기위해 주로 쓰입니다.)

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown1DefaultText

지정된 기본 값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown2DefaultText

지정된 기본 값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown3DefaultText

지정된 기본 값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

dropdown1HintText

드롭다운1 선택 전 사용자에게 보여질 기본 텍스트입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

dropdown2HintText

드롭다운1 선택 전 사용자에게 보여질 기본 텍스트입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

dropdown3HintText

드롭다운1 선택 전 사용자에게 보여질 기본 텍스트입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

dropdown1ValueArray

드롭다운에 표시할 값 목록입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}[]

dropdown2ValueArray

드롭다운에 표시할 값 목록입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}[]

dropdown3ValueArray

드롭다운에 표시할 값 목록입니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}[]

tBtnMode

텍스트 버튼의 사용 갯수를 결정합니다.

기획 지시사항

• 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

tBtn1Text

좌측부터 사용되는 버튼 1에 대한 텍스트값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

tBtn2Text

좌측부터 사용되는 버튼 2에 대한 텍스트값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

tBtn3Text

좌측부터 사용되는 버튼 3에 대한 텍스트값을 표시합니다.

기획 지시사항

• 기획서 상 작성 방법 : 텍스트만 기술

onChangeDropdown1

Dropdown1의 데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

(value: {
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}) => void

onChangeDropdown2

Dropdown2의 데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

(value: {
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}) => void

onChangeDropdown3

Dropdown3의 데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

(value: {
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}) => void

onClickTBtn1

TBtn1이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

onClickTBtn2

TBtn2이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

onClickTBtn3

TBtn3이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

• 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

문서 작성 정보