20210824 - 프로토타입 페이지 작성 - 메인홈 카드 리전 Lottie Animation

1. 카드 리전 추가 후 SQL 작성 (Lottie File 위치 추가)

select '발주, 배송관리 시스템' card_title

     , '' card_subtitle

     , '주문 등록, 배송 관리, C/S업무' card_body

     , '' card_secondary_body

     , 'fa fa-package' card_icon

     , '81' card_badge

     , 'https://assets10.lottiefiles.com/private_files/lf30_ow8fqzzg.json' card_image

  from dual

2. Lottie Animation 사용 설정

Page 설정에서 

Javascript - File URLs : https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js

CSS - Inline : 

lottie-player {

    margin: 0 auto;

}

Card Region - Attributes - Appearance - Layout : Grid

Grid Columns : 4 Columns

Title - Column : CARD_TITLE

Subtitle - HTML Expression :

<lottie-player src="&CARD_IMAGE."  background="transparent"  speed="1"  style="width: 200px; height: 200px;"  loop  autoplay></lottie-player>

Body - Column : CARD_BODY

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Badge Column : CARD_BADGE