Calendar는 날짜와 시간을 입력 받기 위한 컴포넌트입니다. Components 중에서도 Calendar의 선택자는 복잡하고 다양하여 초기에 정확한 구조 이해가 필요합니다. 위의 트리(Tree) 구조를 통해서 Calendar 선택자를 확인하고 Style을 적용하여 디자인을 완성해보겠습니다.
2. Calendar Component 생성하기
① 상단의 Component Toolbar에서 Calendar Component 아이콘을 선택합니다.
② Calendar Component 아이콘을 선택한 상태에서 화면을 한번 클릭하거나 원하는 크기로 마우스 드래그하여 생성합니다.
Calendar Type
Calendar Component의 3가지 디자인
Calendar Component는 type 속성값에 따라 화면에 보이는 형식이 달라집니다. 속성값은 Properties > Appearance > type에서 변경할 수 있으며 속성값은 normal(default), monthonly, spin으로 총 3가지입니다. 예제에서는 normal(default)을 사용합니다.
* type 속성값을 monthonly로 지정한 경우에는 속성값 변경 후, 컴포넌트의 크기를 조절해주세요!
3. 속성 선택자 추가하기
① XCSS 편집창에서 Add Selector 아이콘을 선택합니다.
② Components에서 Calendar를 체크하고 Add 버튼을 누른 후, 속성과 속성값을 추가합니다.
* 속성값 입력은 정확도와 텍스트의 오류 방지를 위하여 Properties에서 작업하는 것을 권장합니다.
구분
종류
결과 코드
Components
Calendar
.Calendar
{
-nexa-border : 1px solid #cccccc;
background : transparent;
}
4. 자식 선택자 추가하기
Calendar의 자식 선택자는 3depth로 이루어져 있을 만큼 종류가 다양합니다. Calendar의 type 속성값인 normal을 기준으로 디자인을 보면서 순차적으로 자식 선택자를 추가해보겠습니다.
Dropbutton 디자인 하기
① XCSS 편집창에서 Add Child Selector 아이콘을 선택합니다.
② Child Controls에서 calendaredit, dropbutton을 체크하고 Add 버튼을 누릅니다.