Web - ToolBar (Added in 2.0)

Added in 2.0

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

정의	ToolBar
최적화 대상	Desktop
기획 배포	검토
디자인 가이드 배포	검토
개발 코드 배포	완료

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

ToolBar와 BulkActionBar는 서로 동시에 존재 할 수 없습니다.
- BulkActionBar가 생길 시 ToolBar는 숨겨집니다.

ToolBar와 BulkActionBar는 동시에 존재할 수 없으나(BulkActionBar가 나오면 ToolBar는 숨김처리됨) WF상 기입은 함께 해야 합니다.
ToolBar 또는 BulkActionBar 둘 중 하나만 존재해도 흰색 박스를 표현해야 합니다.

[간격 가이드]

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

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

	구성	내용
공통	height	40px
좌측 영역 (검색 전)	검색 아이콘	Web - IconButton 참고 baseSize : medium iconSize : 24 iconName : ic_search
	Chip	Chip text : (해당 테이블의 필터 항목) displayType : filter_single 가장 첫 status : first is selected rest is none *Chip 5개 초과 시 더보기 버튼 노출 더보기 (Web - IconButton 참고) baseSize : medium iconSize : 24 iconName : ic_more
좌측 영역 (검색 후)	SearchField	뒤로가기 버튼 (Web - IconButton 참고) baseSize : medium iconSize : 20 iconName : ic_arrow_left 작성 영역 (Web - TextField 가이드 참고) size : medium customWidth : 424px 검색 버튼 (Web - IconButton 참고) baseSize : medium iconSize : 20 iconName : ic_search
우측 영역	-	Web - IconButton 참고 baseSize : medium iconSize : 24 iconName : (기획 문서에 따름) *기획 권고 사항) Download를 넣을 경우 가장 우측에 넣을 것

구성	내용
IconButton	baseColorKey : ui_cpnt_button_fill_base_transparent iconColorKey : ui_cpnt_button_icon_enabled
base	`ui_cpnt_toolbar_base`

SearchField 사용 여부를 설정할 수 있습니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

SearchField의 placeholder에 표시할 텍스트 값입니다.

(searchMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

SearchField의 지정된 기본 값을 보여줘야 할 때 사용합니다.

(searchMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

ChipList 사용 여부를 설정할 수 있습니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

Chip들에 표시될 값들의 리스트입니다.

(chipMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	CODE `{ text: PDSTextType; value: string \| number \| null \| boolean; }[]`
Default	-

Chip들 중 활성화 된 Chip의 옵션 값입니다.

(chipMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	CODE `{ text: PDSTextType; value: string \| number \| null \| boolean; }`
Default	-

icon button의 사용 여부 및 사용 갯수를 설정할 수 있습니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'iBtn_amount1'`	버튼 1개 사용
`'iBtn_amount2'`	버튼 2개 사용
`'iBtn_amount3'`	버튼 3개 사용

우측에서 첫번째 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

(iBtnMode가 'iBtn_amount1' / 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

우측에서 첫번째 아이콘의 형태를 결정합니다.

(iBtnMode가 'iBtn_amount1' / 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

우측에서 두번째 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

(iBtnMode가 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

우측에서 두번째 아이콘의 형태를 결정합니다.

(iBtnMode가 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

우측에서 세번째 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

(iBtnMode가 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

우측에서 세번째 아이콘의 형태를 결정합니다.

(iBtnMode가 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

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

(chipMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`(option: PDSValueOption) => void`
Default	-

SearchField 내부의 < 버튼이 클릭 된 시점에 이벤트를 부여합니다.

(searchMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`() => void`
Default	-

SearchField 내부의 돋보기 버튼이 클릭 된 시점에 이벤트를 부여합니다.

(searchMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`(value: string) => void`
Default	-

SearchField 내부에서 enter 키를 누르는 시점에 이벤트를 부여합니다.

(searchMode가 'use'일때만 적용됩니다.)

기획 지시사항

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

Type	`(value: string) => void`
Default	-

우측에서 첫번째 아이콘 버튼이 클릭 된 시점에 이벤트를 부여합니다.

(iBtnMode가 'iBtn_amount1' / 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`() => void;`
Default	-

우측에서 두번째 아이콘 버튼이 클릭 된 시점에 이벤트를 부여합니다.

(iBtnMode가 'iBtn_amount2' / 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`() => void;`
Default	-

우측에서 세번째 아이콘 버튼이 클릭 된 시점에 이벤트를 부여합니다.

(iBtnMode가 'iBtn_amount3' 일때만 적용됩니다.)

기획 지시사항

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

Type	`() => void;`
Default	-

소유자 / 관리자	김혜진, 박윤규, 안은수
변경 이력	2023/03/10 : Properties 부분 작성 - 안은수 2023/02/20 : 문서 최초 작성 - 김혜진

Definition

Principle

구성

기획서 WF 작성 방법 참고

Spec

Guide

Size, Property

Color 구성

Color Key

Properties

searchMode

searchFieldHintText

searchFieldDefaultText

chipMode

chipTextArray

chipValue

iBtnMode

iBtn1IconName

iBtn1IconFillType

iBtn2IconName

iBtn2IconFillType

iBtn3IconName

iBtn3IconFillType

onClickChip

onClickSearchFieldResetIBtn

onClickSearchIBtn

onEnterKeyDown

onClickIBtn1

onClickIBtn2

onClickIBtn3

문서 작성 정보