안녕하세요.
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