Guideline ERPiU WEB 조회조건 템플릿
dews-condition-panel)은 조회조건 및 폼 데이터 입력 시 사용할 수 있는 패널로 ※ 다이얼로그에서의 상태 패널은 일반 업무 페이지와는 설정이 다르므로 다이얼로그 가이드의 상태 패널 부분을 확인해 주세요.
.dews-ui-condition-panel |
외곽선 및 배경색을 지정하며, 전체 항목의 컨테이너가 되는 요소입니다. |
|---|---|
.dews-ui-condition-form |
내부의 컨트롤을 폼으로 그룹화하여 사용하기 위한 요소로 필수 요소입니다.form 요소가 필요하지 않은 경우에는 div 태그로 대체할 수 있습니다.
|
ul |
상태 패널 내부의 항목들을 그룹화하는데 사용됩니다. 상하로 분리된 확장 상태 패널을 사용할 때는 ul 태그를 추가하시면 됩니다.
|
li |
상태 패널 내부의 각각의 항목을 싸고 있는 요소입니다. |
label |
각 항목의 제목을 나타내는 요소입니다. 필수 표시를 추가할 때는 required 클래스를 추가합니다.
|
span |
입력 컨트롤이나 출력 내용이 위치합니다. 필수 요소이며 다수의 입력 컨트롤을 배치할 수 있습니다. |
col-2와 col-3 클래스를 추가하아여 가로로 2칸 또는 3칸을 병합할 수 있습니다.
| 컬럼 수 | 클래스 구성 (대상 요소: dews-condition-panel ) |
|---|---|
| 3 컬럼 | dews-condition-panel |
| 2 컬럼 | dews-condition-panel + div-2 |
| 1 컬럼 | dews-condition-panel + div-1 |
| 병합할 컬럼의 갯수 | 적용 클래스 (대상 요소: li ) |
|---|---|
| 2개 병합 | col-2 |
| 3개 병합 | col-3 |
100px입니다.90px ~ 120px까지 조정이 가능합니다.#id > .dews-condition-form > ul > li > label { width: 90px; }
ul 태그를 여러 개를 구성하여 각 ul에 포함되어 있는 요소들을 그룹화 할 수 있습니다.
| 기준 해상도(너비(W)) | 대상 너비 | 스타일시트 미디어 쿼리 |
|---|---|---|
| 1280 | 1353px 이하 | @media all and (max-width: 1353px) { ... } |
| 1377 | 1354px 이상 1587px 이하 | @media all and (min-width: 1354px) and (max-width: 1587px) { ... } |
| 1600 | 1588px 이상 | @media all and (min-width: 1588px) { ... } |
