Web - AdminList (Added in 2.0)

정의

AdminList

최적화 대상

Desktop

기획 배포

검토

디자인 가이드 배포

검토

개발 코드 배포

완료

구성

내용

height

48px

selection 영역

(column 1)

Web - 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

Web - TextLabel 참고

• headerText

  • style : caption1Regular

divider

Web - Divider 참고

• direction : horizontal

구성

내용

text

TextLabel

• 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 참고

구성

내용

emptyText

TextLabel

• colorTheme : sysTextTertiary

enum

'multi'

'none'

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

'single'

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

'multi'

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

enum

'use'

'none'

HeaderRow를 사용하지 않습니다.

'use'

HeaderRow를 사용합니다.

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

-

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

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

-

enum

'small'

'small'

'medium'

'large'

'xlarge'

enum

'btn_amount2'

'none'

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

'btn_amount1'

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

'btn_amount2'

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

'btn_amount3'

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

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

-

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

-

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

-

enum

'fix'

'fix'

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

'hover'

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

number | 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까지가 숨겨집니다.

React.ReactElement<React.ComponentProps<typeof ToolBar>>

-

React.ReactElement<React.ComponentProps<typeof BulkActionBar>>

-

(id: number) => void

-

(id: number) => void

-

(id: number) => void

-

React.ReactNode

-

(ids: number[]) => void

-

number[]

-

number[]

-

김혜진, 박윤규, 안은수

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

• 2023/03/02 : toolBar와 bulkActionBar prop 삭제 - 안은수

• 2023/02/17 : AdminList 문서 복제, BulkActionBar에 대한 내용과 Prop 삭제 - 김혜진