Web - AdminList (Deprecated in 2.2)

정의

AdminList

최적화 대상

Desktop

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

구성

내용

height

48px

selection 영역

(column 1)

IconButton 참고

• fillType : fill

• baseSize : medium

• iconSize : 16

• shapeType : rectangle

  selection 영역(check)

• Unselected

  • fillType : line

  • iconName : ic_checkbox_off

  • iconColorKey : ui_cpnt_selcontrols_icon_default

• Selected

  • fillType : fill

  • iconName : ic_checkbox_on

  • iconColorKey : ui_cpnt_selcontrols_icon_primary

• Indeterminate

  • fillType : fill

  • iconName : ic_checkbox_indeterminate

  • iconColorKey : ui_cpnt_selcontrols_icon_primary

text

TextLabel 참고

• headerText

  • style : caption1Regular

divider

Divider 참고

• direction : horizontal

구성

내용

height

56px

text

TextLabel 참고

• style : body2Bold

Dropdown

• size : small

• selectMode : one

• contextMenuSelectMode : simple

• 최대 3개까지 가능

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

TextButton

• size : small

• 최대 3개까지 가능

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

divider

Divider 참고

• direction : vertical

• height : 16px

구성

내용

text

TextLebel

• styleTheme : body2Regular

구성

내용

selection 영역

IconButton 참고

• iconColorKey

  • off : ui_cpnt_list_icon_03

  • on : ui_cpnt_list_icon_active_primary

• baseColorKey : ui_cpnt_button_fill_base_transparent

text

TextLabel 참고

• headerText

  • colorTheme : sysTextSecondary

base

ui_cpnt_list_base_area

Divider

Divider 참고

구성

내용

text

TextLabel

• {n}개 선택됨

  • colorTheme : sysTextWhite

Dropdown

• colorTheme : dark

TextButton

• colorTheme : white

base

ui_cpnt_datatable_bulkaction_base

구성

내용

emptyText

TextLabel

• colorTheme : sysTextTertiary

enum

'multi'

'none'

selection 영역(column 1)이 표시되지 않습니다.
체크박스가 사라집니다. 아이템을 클릭 했을 시 아무런 표시를 하지 않습니다.

'single'

Added in 1.3

체크박스가 사라집니다. 아이템을 클릭 했을 시 선택된 아이템의 background-color만 줍니다.
하나만 선택해야할 때 (single select) 사용합니다.

'multi'

Added in 1.3

여러 개의 아이템을 선택할 수 있습니다. 체크박스를 사용합니다.

enum

'use'

'none'

HeaderRow를 사용하지 않습니다.

'use'

HeaderRow를 사용합니다.

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

-

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

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

-

enum

'small'

'small'

'medium'

'large'

enum

'dropdown_amount1'

'none'

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

'dropdown_amount1'

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

'dropdown_amount2'

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

'dropdown_amount3'

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

-

-

-

-

-

-

-

-

-

-

-

-

enum

'fix'

'fix'

우측 액션 버튼이 고정 영역을 가지고 있습니다.

'hover'

우측 액션 버튼을 리스트 아이템 위에 띄웁니다.

enum

'btn_amount2'

'none'

메인 버튼을 사용하지 않습니다.

'btn_amount1'

퀵액션 버튼을 1개 사용합니다.

'btn_amount2'

퀵액션 버튼을 2개 사용합니다.

'btn_amount3'

퀵액션 버튼을 3개 사용합니다.

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

-

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

-

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

-

enum

-

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

-

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

-

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'mbtn_amount1'

'none'

메인 버튼을 사용하지 않습니다.

'mbtn_amount1'

메인 버튼을 1개 사용합니다.

'mbtn_amount2'

메인 버튼을 2개 사용합니다.

'mbtn_amount3'

메인 버튼을 3개 사용합니다.

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

-

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

-

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

-

enum

'tbtn_amount1'

'none'

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

'tbtn_amount1'

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

'tbtn_amount2'

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

'tbtn_amount3'

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

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

-

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

-

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

-

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

-

enum

'infinite'

'none'

모든 스크롤이 불가능하고, 아이템을 단순히 나열합니다.
height는 자동으로 Item의 갯수만큼 늘어나게 됩니다.

'infinite'

무한 스크롤을 사용합니다.
height는 부모의 높이에 맞추게 됩니다.

'page'

페이지네이션 형식을 사용하고, 제한적으로만 스크롤을 사용합니다.

enum

'moving'

'moving'

움직일 때에만 표시하고 더이상 표시하지 않습니다.

'hidden'

스크롤을 아예 표시하지 않습니다.

/* 참고용 */
#element{
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
#element::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/* 참고
* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
*/

'visible'

항상 표시합니다.

/* hidden과 비슷한 방식으로 수치를 결정 */
{
}

string

'all'

enum

'use'

'none'

모든 화면 사이즈에서 모든 정보가 보여집니다.

'use'

1400px기준으로, 전체 화면 사이즈가 해당 너비 이하가 되면 column3부터 column10까지가 숨겨집니다.

-

-

-

() => void

-

() => void

-

() => void

-

() => void

-

() => void

-

() => void

-

(id: number) => void

-

(id: number) => void

-

(id: number) => void

-

React.ReactNode

-

(ids: number[]) => void

-

number[]

-

number[]

-

김혜진, 박윤규

• 2023/01/27 : flexibleHideInfoMode prop 추가 - 안은수

• 2022/09/29 : headerRowCheckboxName prop 추가 - 안은수

• 2022/09/06 : quickActionBtn1~3State prop deprecated in 1.6 표시 추가- 안은수

• 2022/08/30 : dropdown1~3HintText prop 추가, spec 내 emptyText 가이드 수정(하단 간격 추가) - 김혜진

• 2022/07/01 : dropdown1Value, dropdown2Value, dropdown3Value prop 추가 - 안은수

• 2022/06/29 : column2HeaderText 필수 표시 추가 - 안은수

• 2022/06/02 : mBtn 관련 deprecate 표시, tBtn 관련 add 표시 - 김혜진

• 2022/05/24 : 코드에 추가된 prop추가(이벤트 관련 위주) - 안은수

• 2022/04/29 : 코드에만 있던 prop추가 - 안은수

• 2022/04/21 : selectionMode의 value값 수정(none/one/multi) - 김혜진

• 2022/04/15 : Property 기술방법 변경 - 김혜진

• 2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진