8.RTL

Edit

해당 기능은 2019년 5월 정기버전 ( 17. 0. 0. 2000) 이후 부터 사용하 실 수 있습니다.

참고화면

Project : EDU_nexacro17_Design > TEMP > functionRTL.xfdl

아랍권 같이 화면의 표시기준이 오른쪽인 환경을 지원하는 기능

8.1RTL

8.1.1속성

undefined, true, false 값 중 하나를 설정합니다.

분류

설명

Action

undefined

사용자가 rtl 속성값을 설정하지 않거나 삭제했을 경우 설정

true

• 내부 컨텐츠 또는 컴포넌트 표시되는 기준을 오른쪽으로 설정

• 내부 좌표계의 기준을 오른쪽으로 설정

• 텍스트 표시기준을 오른쪽으로 설정

• 수직스크롤바가 있을 경우 왼쪽으로 표시

false

• 내부 컨텐츠 또는 컴포넌트 표시되는 기준을 왼쪽으로 설정

• 내부 좌표계의 기준을 왼쪽으로 설정

• 텍스트 표시 기준을 왼쪽으로 설정

• 수직스크롤바가 있을 경우 오른쪽에 표시

undefined 설정 시 Environment 의 locale 속성에 설정된 국가 및 언어 설정값을 기준으로 rtl 속성이 적용됩니다.

Environment의 locale 속성값을 설정하지 않았을 경우 스시템의 국가 및 언어 설정값이 적용됩니다.

8.1.2특징

8.1.3스타일속성

RTL 상태 일 때 적용할 이미지를 설정하는 속성들을 추가했습니다.

-nexa-rtl-background-image

rtl 속성이 true로 적용될 때 배경에 표시될 이미지를 설정하는 속성

-nexa-rtl-edge-image

rtl 속성이 true로 적용될 때 테두리 안쪽에 표시될 edge 이미지를 설정하는 속성

-nexa-rtl-icon

rtl 속성이 true로 적용될 때 표시될 아이콘 이미지를 설정하는 속성

• rtl 속성에 의해 표시기준이 변경되면 반전되 이미지를 적용하려 할 때 사용하는 속성입니다.

• XCSS에서만 설정할 수 있는 속성이며 스크립트로 값을 변경할 수 없습니다.

• 해당 속성값을 설정하지 않으면 원래 속성에 해당하는 이미지가 적용됩니다.

8.1.4스타일적용

RTL 기능이 적용된 코드를 Generate를 하려면 Nexacro Studio 의 옵션값을 설정하여야 합니다.

Tool > Option > Generate

8.1.5적용 예

텍스트는 아랍권 문자가 아닌 영어로 사용한 점 이해부탁드립니다.

방향성이 있는 이미지를 사용한 경우

변경한 화면 속성
Action > rtl - true

해당 버튼 소스

방향성이 있는 이미지가 필요하므로 추가된 속성에 방향에 맞는 이미지를 작업하여 적용한 경우의 소스

.Button.btn_RTL_logout
{
    -nexa-icon : url('theme://images/btn_LTR_logout.png');
    font : bold 28px "Malgun Gothic";
    -nexa-text-padding : 0px 15px;
    -nexa-rtl-icon : url('theme://images/btn_RTL_logout.png');
}

방향성을 구분하지 않아 이미지를 따로 사용하지 않은 경우

동일한 이미지를 보여준다