...
...
| Table of Contents |
|---|
...
...
Setup
Create New
카드 리스트 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. NodeType과 카드 리스트 타이틀 입력, Data Sync와 API 사용여부를 설정 할 수 있다.
...
Style : 기본적으로 셋팅된 카드 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역
...
function : 카드 리스트 내에 Card 관련 상세 설정 및 기타 기능 설정 영역
...
Events : 버튼과 페이지네이션을 설정하는 영역
...
Search : 검색바, 검색폼 , 테이블 헤더에 사용하는 Filter/Sorter Filter, Search Form 컴포넌트 연결 기능 설정 영역
...
...
Style Option
1. Card List Type
카드 리스트 타입을 선택한다.
...
(Grid, List, Sortable)
Grid Size : 카드 리스트 타입
Grid선택시 Grid 사이즈 선택 가능(Small,Default,Large)
2.
...
| Status | ||||
|---|---|---|---|---|
|
카드 리스트 타이틀의 노출/비노출 설정
3. Bordered
| Status | ||||
|---|---|---|---|---|
|
카드 리스트 보더 노출/비노출 설정
4. Card List Type
| Status | ||||
|---|---|---|---|---|
|
카드 리스트 타입 선택(Grid, List, Sortable)
Grid Size : 카드 리스트의
Grid사이즈 옵션(Small,Default,Large)
...
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
...
...
...
...
Active First Item
페이지 처음 진입 시 리스트에 첫번째 항목 활성화(Selected) 여부를 설정한다.
❖ 옵션 사용시, 셋팅화면 하단에 있는 On Click/Double Click > Page type 설정 필수
| Info |
|---|
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)
카드 리스트의 세로 최대 사이즈 직접 입력
8. List Default PageSize
| Status | ||||
|---|---|---|---|---|
|
9. List Show PageSize Changer
| Status | ||||
|---|---|---|---|---|
|
List Show PageSize : 수치 입력
...
사이즈를 직접 입력하여 설정 한다.
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
...
...
| colour | Red |
|---|---|
| title | need check |
카드 리스트의 카드 스타일을 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)
4. Thumbnail Shape
카드 썸네일 모양 선택(Square, Circle, Rectangle)
| Status | ||||
|---|---|---|---|---|
|
5. Thumbnail Size
카드 썸네일 사이즈 입력
6. Active First Item
페이지 처음 진입 시 리스트에 첫번째 항목 선택 여부 설정
셋팅화면 사단에 있는 On Click/Double Click > Page type을 반드시 설정하자.
...
OFF
...
ON
...
...
| Status | ||||
|---|---|---|---|---|
|
Events Option
| Status | ||||
|---|---|---|---|---|
|
Events Option
Events Tab의 상세 옵션 내용은 다음과 같다. (옵션 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Events-Option
1. Event Buttons
...
)
...
...
Search Option
| Status | ||||
|---|---|---|---|---|
|
1. Search Bar
2. Table Header Search
...
)
...