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
카드 리스트 타입을 선택한다.(Grid, List, Sortable)
Grid Size : 카드 리스트 타입
Grid선택시 Grid 사이즈 선택 가능(Small,Default,Large)
2. Active First Item
페이지 처음 진입 시 리스트에 첫번째 항목 활성화(Selected) 여부를 설정한다.
❖ 옵션 사용시, 셋팅화면 하단에 있는 On Click/Double Click > Page type 설정 필수
On Click 설정 & Active First Item{ON}
3. Hide Title
카드 리스트 타이틀의 노출/비노출 여부를 설정한다.
4. Thumbnail Shape (ASIS: Image Shape)
카드 썸네일 모양을 선택한다.(Square, Circle)
Square | Circle |
|---|---|
 |  |
5. Thumbnail Size (ASIS: Image Size)
카드 썸네일 사이즈를 입력하여 설정 할 수 있다.
6. Fix Card Width
카드의 가로 길이 고정 여부를 ON/OFF 로 선택 한다.
7. Card Width Min (ASIS: Card Minimal Width)
카드 가로 최소 사이즈를 직접 입력하여 설정 한다.
8. List Height Max (ASIS: List Max Height)
카드 리스트의 세로 최대 사이즈를 직접 입력하여 설정 한다.
9. Custom Title Style
카드 리스트의 타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.
(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)
10. Custom Card Style
카드 리스트의 스타일을 변경 할 수 있다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.
(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)
Function Option
1. Thumbnail Type
카드 썸네일 타입을 선택 할 수 있다.(Image, Avatar, Icon)
2. Title Type
카드별 타이틀 입력 타입을 선택하여 커스텀 할 수 있다.(Property, Code, Function)
3. Description Type
카드별 디스크립션 입력 타입을 선택하여 커스텀 할 수 있다.(Property, Code, Function)
Events Option
Events Tab의 상세 옵션 내용은 다음과 같다. (옵션 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Events-Option )
Search Option
Search Tab의 상세 옵션 내용은 아래와 같다. (옵션 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Search-Option )
