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 )
