...
| 기능 (Action) | 기본형 | 테두리/밑줄형 | 배경 채움형 | 투명형 |
|---|
| 기본 |
|
|
|
|
| 조회 |
|
|
|
|
| 추가 |
|
|
|
|
| 삭제 |
|
|
|
|
| 저장 |
|
|
|
|
3. 그리드 스타일 해부도 (Grid Anatomy)
데이터 그리드의 각 요소별 기본 스타일과 선 굵기를 확인해 보세요.
헤더 스타일 #F4F5F7 바탕, 굵게 중앙 정렬 | 항목 (Header) 값 (Header) |
일반 데이터 행 #FFFFFF (기본 배경) | 데이터 1 1,000 |
행 배경 (반복) #FAFBFC (구분을 위한 배색) | 데이터 2 2,000 |
소계 스타일 #F4F5F7 바탕, 상단 선 굵게 | 소계 3,000 |
총합계 스타일 #E4ECF0 바탕, 상단 선 진하게 | 총합계 3,000 |
| 정보 |
|---|
행 높이 설정 가이드
사용하는 폰트 크기에 맞춰 그리드의 행 높이도 조절합니다. (@그리드 > 디자인 > 스타일 > 레코드 > '높이') - 표준 (14px) : 높이 36px
- 밀집 (12px) : 높이 32px
- 초밀집 (11px) : 높이 28px
|
4. 테마별 데이터 그리드 색상 적용표
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 블루 (Standard Blue) | 헤더 스타일 | | 일반 데이터 | | 행 배경 (반복) | | 선택 레코드 색 | 헤더 스타일 #F4F5F7
행 배경 (반복) #FAFBFC
선택 레코드 색 #E6EFFC
테두리 / 소계 #DFE1E6 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 소프트 그린 (Soft Green) | 헤더 스타일 | | 일반 데이터 | | 행 배경 (반복) | | 선택 레코드 색 | 헤더 스타일 #F0FAF5
행 배경 (반복) #F7FCF9
선택 레코드 색 #E3FCEF
테두리 / 소계 #ABF5D1 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 모던 다크 (Modern Dark) | 헤더 스타일 | | 일반 데이터 | | 행 배경 (반복) | | 선택 레코드 색 | 헤더 스타일 #EBECF0
행 배경 (반복) #FAFBFC
선택 레코드 색 #E4ECF0
테두리 / 소계 #C5CDD7 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 웜 오렌지 (Warm Orange) | 헤더 스타일 | | 일반 데이터 | | 행 배경 (반복) | | 선택 레코드 색 |
헤더 스타일 #FFEBE6
행 배경 (반복) #FFF7F5
선택 레코드 색 #FFD8CC
테두리 / 소계 #FFBDAD |
|
|
...