...
...
| Table of Contents |
|---|
...
Setup
Create New
카드 리스트 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. NodeType과 카드 리스트 타이틀 입력, Data Sync와 API 사용여부를 설정 할 수 있다.
...
Events : 버튼과 페이지네이션을 설정하는 영역
...
Search : 검색바, 검색폼 , 테이블 헤더에 사용하는 Filter/Sorter Filter, Search Form 컴포넌트 연결 기능 설정 영역
...
...
Style Option
1. Card List Type
...
| colour | Red |
|---|---|
| title | 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
...
...
Big
...
Middle
...
Small
...
...
...
2
...
카드 리스트 사이즈 선택(Small, Default, Large)
...
. Active First Item
페이지 처음 진입 시 리스트에 첫번째 항목 선택 여부 설정활성화(Selected) 여부를 설정한다.
❖ 옵션 사용시, 셋팅화면 하단에 있는 On Click/Double Click > Page type 설정 필수
...
OFF
...
ON
...
| Info |
|---|
On Click 설정 & Active First Item{ON} |
...
3. Hide Title
카드 리스트 타이틀의 노출/비노출 설정
...
여부를 설정한다.
...
| Status | ||||
|---|---|---|---|---|
|
카드 리스트 보더 노출/비노출 설정
6. Thumbnail Shape
카드 썸네일 모양 선택
4. Thumbnail Shape (ASIS: Image Shape)
카드 썸네일 모양을 선택한다.(Square, Circle, Rectangle)status
Square |
|---|
...
Circle |
|---|
...
 |
...
 |
5. Thumbnail Size (ASIS: Image Size)
카드 썸네일 사이즈 입력
...
사이즈를 입력하여 설정 할 수 있다.
6. Fix Card Width
카드의 가로 길이 고정 여부 설정
...
여부를 ON/OFF 로 선택 한다.
7. Card Width Min
| Status | ||||
|---|---|---|---|---|
|
(ASIS: Card Minimal Width)
카드 가로 최소 사이즈 직접 입력
...
사이즈를 직접 입력하여 설정 한다.
8. List Height Max
| Status | ||||
|---|---|---|---|---|
|
(ASIS: List Max Height)
카드 리스트의 세로 최대 사이즈 직접 입력
...
사이즈를 직접 입력하여 설정 한다.
9. Custom Title Style
카드 리스트의 카드 스타일을 Title Style Set으로 설정한다.
...
타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.
(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)
10. Custom Card Style
카드 리스트의 카드 스타일을 Card Style Set으로 설정한다.스타일을 변경 할 수 있다. 스타일 설정은 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
이벤트 버튼과 페이지 네이션 기능을 사용 할 수 있다.
| Status | ||||
|---|---|---|---|---|
|
1. Event Buttons
2. Pagination
Search Option
...
| Status | ||||
|---|---|---|---|---|
|
...
...
Search Option
Search Tab의 상세 옵션 내용은 아래와 같다. (옵션 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Search-Option
1. Search Bar
2. Search Form Filter
To be deleted?
| Status | ||||
|---|---|---|---|---|
|
0. Create Page
1. List Default PageSize
2. List Default PageSize
3. List Show PageSize Changer
...
)
...