https://docs.google.com/spreadsheets/d/1GR0ElwGus8dPp79svWeYp6PpPWBJxpdREgMMNHA8RHM/edit#gid=308071231

Setup

Create New

카드 리스트 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. NodeType과 카드 리스트 타이틀 입력, Data Sync와 API 사용여부를 설정 할 수 있다.

Set NodeType

NodeType을 선택하면 다음과 같이 카드 리스트 셋팅 영역이 출력된다.

Card List Options Set Area : 카드 리스트 옵션을 Style, function, Events, Search 4가지 탭으로 제공
Card List Click Set Area : 카드 리스트를 Click, Double Click 할 경우 발생하는 이벤트를 설정하는 영역

Option Detail

카드 리스트 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같다.

Style : 기본적으로 셋팅된 카드 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역

function : 카드 리스트 내에 Card 관련 상세 설정 및 기타 기능 설정 영역

Events : 버튼과 페이지네이션을 설정하는 영역

Search : 검색바, 검색폼, 테이블 헤더에 사용하는 Filter/Sorter 기능 설정 영역

Style Option

1. Card List Type NEED CHECK

카드 리스트 타입 선택(Grid, List, Sortable)

Grid Size : 카드 리스트 타입 Grid 선택시 Grid 사이즈 선택 가능(Small, Default, Large)

https://ionsdp.atlassian.net/browse/ICE4-2211

Grid:

List:

Sortable:

Square Card Type

List Horizontal

Rectangular Card Type

List Vertical

Can move cards to drag

Card List Type{Grid} > Grid Size Option

Big	Middle	Small

2. Size

카드 리스트 사이즈 선택(Small, Default, Large)

3. Active First Item

페이지 처음 진입 시 리스트에 첫번째 항목 선택 여부 설정

❖ 셋팅화면 하단에 있는 On Click/Double Click > Page type 설정 필수

OFF	ON

4. Hide Title CHANGE "SHOW TITLE"

카드 리스트 타이틀의 노출/비노출 설정

5. Bordered NEED CHECK

카드 리스트 보더 노출/비노출 설정

6. Thumbnail Shape

카드 썸네일 모양 선택(Square, Circle, Rectangle) NEW Rectangle

7. Thumbnail Size

카드 썸네일 사이즈 입력

8. Fix Card Width

카드의 가로 길이 고정 여부 설정

9. Card Width Min NAME CHANGE

카드 가로 최소 사이즈 직접 입력

10. List Height Max NAME CHANGE

카드 리스트의 세로 최대 사이즈 직접 입력

11. Custom Title Style

카드 리스트의 카드 스타일을 Title Style Set으로 설정한다.

12. Custom Card Style

카드 리스트의 카드 스타일을 Card Style Set으로 설정한다.

Function Option

1. Thumbnail Type

카드 썸네일 타입 선택(Image, Avatar, Icon)

2. Title Type

카드 제목 입력 타입 선택(Property, Code, Function)

3. Description Type

카드 디스크립션 입력 타입 선택(Property, Code, Function)

Events Option

이벤트 버튼과 페이지 네이션 기능을 사용 할 수 있다. 참고 https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Events-Option

1. Event Buttons

Search Option

검색바와 검색폼 필터 기능을 사용 할 수 있다. 참고 https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Search-Option

Setup

Create New

Set NodeType

Option Detail