Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 20 Next »

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)

Thumbnail Shape{Square}

Thumbnail Shape{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 )

  • No labels