Guideline ERPiU WEB 다이얼로그 가이드라인
| 분류 | 창 크기(px) | 사용처 |
|---|---|---|
| 소 | 400 X 450 | 단순한 코드 도움 및 출력해야 하는 그리드 컬럼이 많지 않은 경우 |
| 중 | 600 X 500 | 조회 조건이 다수이고 출력해야 하는 그리드의 컬럼의 갯수가 많을 경우 |
| 대 | 800 X 550 | 조회 조건이 2컬럼 이상 구성되어야 하는 경우 및 그리드의 갯수가 2개 이상의 경우 |
| 예외 케이스 | 1000 X 600 | 위 표준 사이즈로 적용이 불가능한 내용을 표현해야 하는 경우 (페이지로 전환하는 것을 추천드립니다.) |
dews-condition-panel)은 키워드 검색을 제외하고는 기본적으로 2개의 컬럼을 생성하는 것이 기본입니다.※ 상태 패널의 기본적인 정보는 상태 패널 가이드라인에서 확인하실 수 있습니다.
| 다이얼로그 크기 | 컬럼 수 | 클래스 구성 (대상 요소: dews-condition-panel ) |
제목 너비 범위(기본) |
|---|---|---|---|
※ 키워드 검색(search)은 모든 창 크기에서 지원합니다.
|
|||
| 소 | 1 컬럼 | dews-condition-panel |
80px ~ 120px (80px) |
| 2 컬럼 | 지원안함 | - | |
| 3 컬럼 | 지원안함 | - | |
| 중 | 1 컬럼 | dews-condition-panel |
80px ~ 120px (80px) |
| 2 컬럼 | dews-condition-panel + div-2 |
80px : 고정 | |
| 3 컬럼 | 지원안함 | - | |
| 대 | 1 컬럼 | dews-condition-panel |
80px ~ 120px (100px) |
| 2 컬럼 | dews-condition-panel + div-2 |
80px ~ 120px (100px) | |
| 3 컬럼 | 지원안함 | - | |
| 예외 케이스 | 1 컬럼 | dews-condition-panel |
80px ~ 120px (100px) |
| 2 컬럼 | dews-condition-panel + div-2 |
80px ~ 120px (100px) | |
| 3 컬럼 | dews-condition-panel + div-3 |
80px ~ 120px (100px) | |
| 다이얼로그 크기 | 스타일시트 미디어 쿼리 |
|---|---|
| 중 | @media all and (min-width: 600px) and (max-width: 799px) { ... } |
| 대 | @media all and (min-width: 800px) and (max-width: 999px) { ... } |
| 예외 케이스 | @media all and (min-width: 1000px) { ... } |
| 다이얼로그 하단 버튼 정의 | |
| 코드 도움창과 같이 페이지로 데이터를 전달하는 다이얼로그에서 사용합니다. | |
| 확인 기능 만 수행하는 다이얼로그에서 사용합니다. | |
| 데이터에 대한 저장이 이뤄지는 다이얼로그에서 사용합니다. | |
dews-condition-panel에 추가적으로 search 클래스를 등록합니다.span태그 내에 위치시킵니다.[ 샘플#1 ]
※ 샘플 페이지에서 단순 키워드 검색 코드 도움을 확인하시면 됩니다.
dews-button-group을 추가합니다.dews-button-group내부에 기능 버튼들을 추가합니다.[ 샘플#2 ]
※ 샘플 페이지에서 2개 이상의 검색 필드를 가진 코드 도움을 확인하시면 됩니다.
dews-button-group을 위치 시킵니다.dews-button-group 안에 기능 버튼들을 추가합니다.dews-button-group을 배치하고 split 클래스를 추가합니다.[ 샘플#3 ]
※ 샘플 페이지에서 기본 업무 다이얼로그를 확인하시면 됩니다.