Skip to main content
Skip table of contents

Web - BulkActionBar (Added in 2.0)

Added in 2.0

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

Definition

정의

BulkActionBar

최적화 대상

Desktop

기획 배포

검토

디자인 가이드 배포

검토

개발 코드 배포

완료

Principle

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

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

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

구성

기획서 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는 숨겨집니다.

구성

내용

height

56px

text

TextLabel 참고

  • style : body2Bold

Dropdown

  • size : small

  • selectMode : one

  • contextMenuSelectMode : simple

  • 최대 3개까지 가능

  • 사용하지 않으면 숨김 처리

TextButton

  • size : small

  • 최대 3개까지 가능

  • 사용하지 않으면 숨김 처리

divider

Divider 참고

  • direction : vertical

  • height : 16px

Color 구성

Color Key

구성

내용

text

TextLabel

  • {n}개 선택됨

    • colorTheme : sysTextWhite

Dropdown

  • colorTheme : dark

TextButton

  • colorTheme : white

base

ui_cpnt_datatable_bulkaction_base

Properties

itemCount

선택된 AdminListItem 갯수입니다.

기획 지시사항

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

Type

number

Default

-

  

dropdownMode

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

기획 지시사항

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

Type

enum

Default

'dropdown_amount1'

Enum Values Description

'none'

드롭다운을 사용하지 않습니다.

'dropdown_amount1'

드롭다운을 1개 사용합니다.

'dropdown_amount2'

드롭다운을 2개 사용합니다.

'dropdown_amount3'

드롭다운을 3개 사용합니다.

dropdown1Value

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

기획 지시사항

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

Type

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

Default

-

  

dropdown2Value

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

기획 지시사항

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

Type

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

Default

-

  

dropdown3Value

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

기획 지시사항

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

Type

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

Default

-

  

dropdown1DefaultText

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

기획 지시사항

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

Type

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

Default

-

dropdown2DefaultText

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

기획 지시사항

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

Type

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

Default

-

dropdown3DefaultText

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

기획 지시사항

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

Type

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

Default

-

dropdown1HintText

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

dropdown2HintText

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

dropdown3HintText

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

dropdown1ValueArray

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

기획 지시사항

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

Type

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

Default

-

dropdown2ValueArray

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

기획 지시사항

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

Type

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

Default

-

dropdown3ValueArray

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

기획 지시사항

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

Type

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

Default

-

tBtnMode

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

기획 지시사항

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

Type

enum

Default

'tbtn_amount1'

Enum Values Description

'none'

텍스트 버튼을 사용하지 않습니다.

'tbtn_amount1'

텍스트 버튼을 1개 사용합니다.

'tbtn_amount2'

텍스트 버튼을 2개 사용합니다.

'tbtn_amount3'

텍스트 버튼을 3개 사용합니다.

tBtn1Text

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

tBtn2Text

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

tBtn3Text

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

기획 지시사항

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

Type

number | string | object | Array<string | object> | undefined | null

Default

-

onChangeDropdown1

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

기획 지시사항

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

Type

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

Default

-

onChangeDropdown2

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

기획 지시사항

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

Type

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

Default

-

onChangeDropdown3

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

기획 지시사항

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

Type

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

Default

-

onClickTBtn1

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

기획 지시사항

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

Type

() => void

Default

-

onClickTBtn2

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

기획 지시사항

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

Type

() => void

Default

-

onClickTBtn3

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

기획 지시사항

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

Type

() => void

Default

-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규, 안은수

변경 이력

  • 2023/03/24 : text 관련 prop들 타입 변경 - 안은수

  • 2023/03/10 : 버전 정보 수정, itemCount prop 추가 - 안은수

  • 2023/02/17 : 문서 최초 작성 - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close