Display: metric - metricOptions containerClass

[hbkim]

안녕하세요.

display: metric 사용시 metricOptions를 통해 여백과 컨테이너를 조절할 수 있습니다.

결과값들의 열을 맞추고 싶으신 경우 활용해보세요.

tailwindcss 사용법에 따라 grid-cols-0 gap-0 사용 가능합니다.

기본 예제

menus:
- path: metric-class
pages:
- path: metric-class
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        293383 as '전체 문제 수',
        82695 as '검수된 전체 문제 수 (주관식 or GOOD or BAD)',
        167375 as '서비스 가능한 전체 문제 수',
        53360 as '국어'
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        28023 as '국어2',
        10157 as '국어3',
        177998 as '수학',
        46547 as '수학2'
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: |
      SELECT 
        129448 as '수학3',
        62025 as '영어',
        8125 as '영어2',
        27668 as '영어3'  
    display: metric    
    metricOptions:
      containerClass: grid grid-cols-4 gap-3            

적용 가능한 다른 꾸미기 옵션

    display: metric
    containerClass: p-3
    
    metricOptions:
      containerClass: grid grid-cols-4 gap-2
      labelClass: text-sky-900/70 text-xs font-bold
      valueClass: text-sky-900 text-4xl font-bold