개요

TitleBarcontrol 을 구성하는 TitleBarButtonControl 오브젝트입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

Status

Name	Type	Description
disabled	status	컴포넌트가 비활성화된 상태
pushed	userstatus	컴포넌트가 push된 상태
mouseover	status	마우스 커서가 컴포넌트 또는 컴포넌트의 특정 아이템 위에 있는 상태
deactivate	status	비활성화된 상태
enabled	status	컴포넌트가 활성화된 상태

속성

background

TitleBarButtonControl 의 배경 영역을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.background[= strbackground]

문법 설정

strBackground ::= [<bg-image> \| <linear-gradient>] [<background-origin> [<background-clip>]] [<background-color>] <bg-image> ::= 'none' \| <imageurl> [<repeat-style>] [<position>] <imageurl> ::= 'URL(' <Theme-Image> \| <Web-Image> ')' <repeat-style> ::= 'repeat-x' \| 'repeat-y' \| 'repeat' \| 'no-repeat' <position> ::= <horizontal-position> <vertical-position> ['/' <background-size>] <horizontal-position> ::= 'left' \| 'center' \| 'right' \| <pos-percentage> '%' <vertical-position> ::= 'top' \| 'center' \| 'bottom' \| <pos-percentage> '%' <background-size> ::= 'auto' \| 'cover' \| 'contain' \| (<length> 'px' \| <percentage> '%') {1,2} <linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')' <angle> ::= 'to left' \| 'to right' \| 'to top' \| 'to bottom' \| 'to left top' \| 'to left bottom' \| 'to right top' \| 'to right bottom' <color-stop> ::= <startcolor-stop> [<listcolor-stop>] <endcolor-stop> <startcolor-stop> ::= <color> [<percentage>'%'] <endcolor-stop> ::= <color> [<percentage>'%'] <listcolor-stop> ::= <color> [<percentage>'%"] [,<listcolor-stop>]* <color> ::= <NamedColor> \| <NumericColor> <background-origin> ::= 'border-box' \| 'padding-box' <background-clip> ::= 'border-box' \| 'padding-box' <background-color> ::= <NamedColor> \| <NumericColor>
* XCSS background : #ffffaa; background : "URL('./images/smiley.gif')" no-repeat center center #ffffaa; background : "URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa; background : "URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa; background : linear-gradient( red , blue , yellow ); background : linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0)); background : "URL('./images/smiley.gif')" border-box border-box #ffffaa; * Script ( normal property ) this.TitleBarButtonControl00.background = "#ffffaa"; this.TitleBarButtonControl00.background = ""URL('./images/smiley.gif')" no-repeat center center #ffffaa"; this.TitleBarButtonControl00.background = ""URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa"; this.TitleBarButtonControl00.background = ""URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa"; this.TitleBarButtonControl00.background = "linear-gradient( red , blue , yellow )"; this.TitleBarButtonControl00.background = "linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))"; this.TitleBarButtonControl00.background = ""URL('./images/smiley.gif')" border-box border-box #ffffaa";
<bg-image>	배경에 표시될 이미지를 "'none' \| <imageurl> [<repeat-style>] [<position>]" 형식으로 설정합니다. <background-color> 값이 설정되어 있으면 배경색 위로 이미지가 표시됩니다. "none" 으로 설정하면 이미지를 설정하지 않습니다. <imageurl> 값으로 이미지를 설정할 수 있습니다. <repeat-style> 값으로 이미지의 반복표시 방향을 설정할 수 있습니다. <position> 값으로 이미지의 표시위치를 설정할 수 있습니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<imageurl>	배경에 표시될 이미지를 "'URL(' <Theme-Image> \| <Web-Image> ')'" 형식으로 설정합니다. "URL ( [이미지경로] )" 형식으로 테마 또는 웹의 이미지를 설정합니다.
<Theme-Image>	테마에 선언된 이미지를 "theme://images\이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.
<repeat-style>	배경에 표시될 이미지의 반복표시 방향을 설정합니다. "repeat-x" 설정 시 이미지가 가로 방향으로 반복표시 됩니다. "repeat-y" 설정 시 이미지가 세로 방향으로 반복표시 됩니다. "repeat" 설정 시 이미지가 가로,세로 방향으로 모두 반복표시 됩니다. "no-repeat" 설정 시 이미지가 반복표시 되지 않습니다. 값을 설정하지 않으면 "repeat" 로 적용됩니다.
<horizontal-position>	배경에 표시될 이미지의 가로 위치를 설정합니다. "left" 설정 시 TitleBarButtonControl 의 왼쪽면과 이미지의 왼쪽면이 정렬되어 표시됩니다. "center" 설정 시 TitleBarButtonControl 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다. "right" 설정 시 TitleBarButtonControl 의 오른쪽면과 이미지의 오른쪽면이 정렬되어 표시됩니다. <pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다. <vertical-position> 값을 설정하고, <horizontal-position> 값을 설정하지 않으면 <horizontal-position> 은 "center" 로 적용됩니다. <vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <horizontal-position> 은 "left" 로 적용됩니다.
<vertical-position>	배경에 표시될 이미지의 세로 위치를 설정합니다. "top" 설정 시 TitleBarButtonControl 의 윗쪽면과 이미지의 윗쪽면이 정렬되어 표시됩니다. "center" 설정 시 TitleBarButtonControl 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다. "bottom" 설정 시 TitleBarButtonControl 의 아랫쪽면과 이미지의 아랫쪽면이 정렬되어 표시됩니다. <pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다. <horizontal-position> 값을 설정하고, <vertical-position> 값을 설정하지 않으면 <vertical-position> 은 "center" 로 적용됩니다. <vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <vertical-position> 은 "top" 으로 적용됩니다.
<pos-percentage>	배경에 표시될 이미지의 가로/세로 위치를 비율로 설정합니다. <horizontal-position> 에 "0%" 설정 시 "left" 와 같은 위치로 적용됩니다. <horizontal-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다. <horizontal-position> 에 "100%" 설정 시 "right" 과 같은 위치로 적용됩니다. <vertical-position> 에 "0%" 설정 시 "top" 와 같은 위치로 적용됩니다. <vertical-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다. <vertical-position> 에 "100%" 설정 시 "bottom" 과 같은 위치로 적용됩니다. 0 보다 작거나 100 보다 큰 값을 설정 시 TitleBarButtonControl 의 영역을 벗어난 가상의 위치로 적용됩니다. 값 설정 시 "%" 단위를 생략할 수 없습니다.
<background-size>	배경에 표시될 이미지의 크기를 설정합니다. - auto: 원본 이미지 크기를 유지합니다. - cover: 이미지 비율을 유지하는 한도 내에서 배경에 빈 공간이 없도록 가장 크게 설정합니다. width 또는 height 길이가 긴 쪽은 잘려서 표시될 수 있습니다. - contain: 이미지가 잘리지 않고 비율을 유지하는 한도 내에서 가장 크게 설정합니다. - <length> \| <percentage>: 이미지의 width, height 크기 또는 컴포넌트 대비 비율을 설정합니다. width 값만 설정하면 원본 이미지 비율에 따라 height 크기를 자동으로 처리합니다. height 값만 설정할 수는 없습니다. 음수값은 설정할 수 없습니다.
<linear-gradient>	배경에 표시될 그라데이션을 "'linear-gradient(' [<angle> , ] <color-stop> ')'" 형식으로 설정합니다. <background-color> 값이 설정되어 있으면 배경색 위로 그라데이션이 표시됩니다. "linear-gradient ( [방향, 색상값, 색상값, ...] )" 형식으로 그라데이션 방향과 색상을 설정할 수 있습니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<angle>	그라데이션의 표시 방향을 설정합니다. "to left" 설정 시 오른쪽에서 왼쪽 방향으로 그라데이션이 표시됩니다. "to right" 설정 시 왼쪽에서 오른쪽 방향으로 그라데이션이 표시됩니다. "to top" 설정 시 아래쪽에서 윗쪽 방향으로 그라데이션이 표시됩니다. "to bottom" 설정 시 윗쪽에서 아래쪽 방향으로 그라데이션이 표시됩니다. "to left top" 설정 시 오른쪽 아래 방향에서 왼쪽 윗 방향으로 그라데이션이 표시됩니다. "to left bottom" 설정 시 오른쪽 윗 뱡향에서 왼쪽 아래 방향으로 그라데이션이 표시됩니다. "to right top" 설정 시 왼쪽 아래 방향에서 오른쪽 윗 방향으로 그라데이션이 표시됩니다. "to right bottom" 설정 시 왼쪽 윗 방향에서 오른쪽 아래 방향으로 그라데이션이 표시됩니다. 값을 설정하지 않으면 "to bottom"으로 적용됩니다.
<color-stop>	그라데이션의 시작점, 끝점, 중간점의 색을 "<startcolor-stop> [<listcolor-stop>] <endcolor-stop>" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 시작점과 끝점의 위치가 결정됩니다. 예를 들어 <angle> 값이 "to left" 이면 TitleBarButtonControl 의 right 위치가 시작점이 되고, left 위치가 끝점이 됩니다. <angle> 값이 "to right" 이면 TitleBarButtonControl 의 left 위치가 시작점이 되고, right 위치가 끝점이 됩니다. <listcolor-stop> 에 그라데이션 중간점의 색을 한개 이상 설정할 수 있으며 <percentage> 값 생략 시 균등하게 표시됩니다.
<startcolor-stop>	그라데이션의 시작점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 시작점 위치가 결정됩니다. 시작점의 <percentage> 값을 "0" 이상으로 설정 시 "시작점~설정값"까지 동일한 색상으로 표시됩니다.
<endcolor-stop>	그라데이션의 끝점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 끝점 위치가 결정됩니다. 끝점의 <percentage> 값을 "100" 이하로 설정 시 "설정값~끝점"까지 동일한 색상으로 표시됩니다.
<listcolor-stop>	그라데이션의 중간점 색을 "<color> [<percentage>'%"] [,<listcolor-stop>]*" 형식으로 설정합니다. 시작점과 끝점 사이에 적용될 중간색을 ","로 구분하여 여러개 설정할 수 있습니다. 뒤에 선언된 색의 <percentage> 값은 먼저 선언된 색의 <percentage> 값보다 커야 합니다.
<color>	그라데이션 색상을 색상이름 또는 색상코드로 설정합니다.
<percentage>	<color> 에 해당하는 색이 적용될 위치를 비율값으로 설정합니다. <angle> 값에 의해 결정된 시작점이 "0%" 로 적용됩니다. <angle> 값에 의해 결정된 끝점이 "100%" 로 적용됩니다. 0 보다 작거나 100 보다 큰 값을 설정 시 TitleBarButtonControl 의 영역을 벗어난 가상의 위치로 적용됩니다. 예를 들어 "150%" 설정 시 시작점에서 끝점까지 거리의 반만큼 끝점에서 벗어난 위치에 <color> 값이 적용됩니다. <percentage> 값을 생략하면 균등한 위치에 <color> 값이 적용됩니다. 값 설정 시 "%" 단위를 생략할 수 없습니다.
<background-origin>	배경으로 처리될 기준영역을 설정합니다. "border-box" 설정 시 Border 를 포함한 영역이 배경영역으로 처리됩니다. "padding-box" 설정 시 Border 의 안쪽 영역이 배경영역으로 처리됩니다. "padding-box" 설정 시 그라데이션의 시작점, 끝점과 배경이미지의 반복 기준위치가 Border 안쪽 영역으로 처리됩니다. 값을 설정하지 않으면 "padding-box" 로 적용됩니다.
<background-clip>	배경이 실제로 표시될 영역을 설정합니다. "border-box" 설정 시 Border 를 포함한 영역에 배경이 표시됩니다. "padding-box" 설정 시 Border 의 안쪽 영역에 배경이 표시됩니다. 값을 설정하지 않으면 <background-origin> 에 설정한 값이 동일하게 적용됩니다. <background-origin> 값도 설정하지 않았을 경우 "border-box" 로 적용됩니다.
<background-color>	배경에 표시될 색을 색상이름 또는 색상코드로 설정합니다. <bg-image> 또는 <linear-gradient> 값이 설정되어 있다면 배경색은 배경이미지 또는 그라데이션 아래에 표시됩니다. <bg-image> 에 적용된 이미지에 투명으로 적용된 부분이 있거나 이미지가 TitleBarButtonControl 영역보다 작다면 해당 영역에 배경색이 표시됩니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- background 속성값을 설정하지 않으면 undefined 가 설정되고, "transparent" 로 동작합니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.

- 배경의 기준영역과 표시영역은 <background-origin>, <background-clip> 값으로 각각 설정합니다.

- 배경 이미지를 중앙에 위치시키려면 <position> 값을 "center" 또는 "center center" 로 설정하여야 합니다.

- 배경이미지와 배경색을 모두 설정하면 배경색 위에 이미지가 표시됩니다.
   그라데이션과 배경색을 모두 설정하면 배경색 위에 그라데이션이 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   두 값을 동시에 설정 시 오동작이 발생할 수 있습니다.

border-radius

TitleBarButtonControl 의 모서리 모양을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.borderRadius[= strborderradius]

문법 설정

strborderradius ::= <horizontal-radius>{4} ['/' <vertical-radius>{4}]
* XCSS border-radius : 10px; border-radius : 5px 6px 10px / 5px 10px; * Script ( normal property ) this.TitleBarButtonControl00.borderRadius = "10px"; this.TitleBarButtonControl00.borderRadius = "5px 6px 10px / 5px 10px";
<horizontal-radius>	모서리를 둥글게 표시하기 위한 가로크기를 설정합니다. pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다. 값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 가로크기로 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.
<vertical-radius>	모서리를 둥글게 표시하기 위한 세로크기를 설정합니다. pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다. 값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 세로크기로 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.

참고

- border-radius 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다. 

- 스크립트로 접근 시 속성명은 "borderRadius" 를 사용해야 합니다.

- <horizontal-radius>와 <vertical-radius>는 "/" 문자로 구분하여 입력합니다.

- Calendar, Combo 와 같이 하위 컨트롤이 존재하는 컴포넌트는 하위컨트롤에도 border-radius 속성을 설정해야 정상적으로 모서리가 표시됩니다.


◆ NRE 제약

- border-radius 속성을 설정하면 모든 테두리가 같은 색으로 적용됩니다.
   -nexa-border 속성에서 top 에 적용된 색이 모든 테두리에 적용됩니다.

box-shadow

TitleBarButtonControl 에 그림자 효과를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.box-shadow

문법 설정

box-shadow ::= 'none' \| [<inset>] <offset> [<blur>'px'] [<spread>'px'] [<color>] <offset> ::= <horizontal>'px' <vertical>'px' <color> ::= <NamedColor> \| <NumericColor>
* XCSS box-shadow : 10px 10px 10px #888888; box-shadow : inset 10px 10px 10px 5px #888888
<inset>	그림자 효과가 컴포넌트 안쪽에 표시됩니다. 생략 시에는 outset으로 동작합니다. NRE는 지원하지 않습니다.
<offset>	그림자 효과가 표시되는 위치를 설정합니다. TitleBarButtonControl 의 좌상단 위치를 기준으로 그림자 효과가 표시될 위치를 가로/세로 픽셀값으로 설정합니다.
<horizontal>	그림자 효과가 표시되는 가로 위치를 설정합니다. 음수로 설정 시 컴포넌트의 왼쪽에 그림자 효과가 표시됩니다. pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.
<vertical>	그림자 효과가 표시되는 세로 위치를 설정합니다. 음수로 설정 시 컴포넌트의 윗쪽에 그림자 효과가 표시됩니다. pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.
<blur>	그림자 효과에 blur를 설정합니다. 음수로 설정 시 blur가 적용되지 않습니다. pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.
<spread>	그림자를 확장하거나 축소합니다. 양수로 설정 시에는 그림자를 확장하고 음수로 설정 시에는 그림자를 축소합니다. NRE는 지원하지 않습니다.
<color>	그림자 효과의 색을 색상이름 또는 색상코드로 설정할 수 있습니다. 값을 입력하지 않으면 브라우저별로 다르게 동작하거나 오동작할 수 있습니다.
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- box-shadow 속성값을 설정하지 않으면 undefined 가 설정되고, "none"으로 동작합니다.

- <blur> 값을 크게 설정하면 시스템 자원 요구량이 많아져 성능 저하의 원인이 됩니다.

- <inset>, <spread> 값은 NRE를 지원하지 않습니다. 
  넥사크로 스튜디오 디자인 창에서도 속성값 설정 시 변경된 디자인을 확인할 수 없습니다.

cursor

TitleBarButtonControl 영역에서 표시될 마우스 포인터의 종류를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.cursor

문법 설정

cursor ::= 'none' \| 'auto' \| 'default' \| 'copy' \| 'crosshair' \| 'help' \| 'move' \| 'not-allowed' \| 'pointer' \| 'progress' \| 'text' \| 'wait' \| 'ew-resize' \| 'e-resize' \| 'w-resize' \| 'ns-resize' \| 'n-resize' \| 's-resize' \| 'nesw-resize' \| 'ne-resize' \| 'sw-resize' \| 'nwse-resize' \| 'nw-resize' \| 'se-resize'
* XCSS cursor : default ;
"none"	마우스 포인터를 표시하지 않습니다. macOS NRE는 지원하지 않습니다.
"auto"	컴포넌트의 특성에 맞는 포인터가 표시됩니다. Edit계열 컴포넌트는 "text" 포인터가 표시됩니다. 그외 계열 컴포넌트는 "arrow" 포인터가 표시됩니다.
"default"	시스템의 기본 포인터가 표시됩니다. 일반적으로 "arrow" 포인터가 표시됩니다.
"copy"	화살표와 작은 십자("+") 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"crosshair"	십자("+") 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"help"	화살표와 작은 물음표 모양의 포인터가 표시됩니다. Safari 브라우저는 물음표 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"move"	십자 화살표 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"not-allowed"	금지 표지판 모양의 포인터가 표시됩니다. Safari 브라우저는 화살표와 금지 표지판 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"pointer"	손모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"progress"	OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다. 원, 화살표와 모래시계, 화살표와 원 등 다양한 형태로 표시됩니다. macOS NRE 에서는 지원하지 않습니다.
"text"	아이("I") 모양의 포인터가 표시됩니다.
"wait"	OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다. 원, 모래시계, 시계 등 다양한 형태로 표시됩니다.
"ew-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"e-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"w-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"ns-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"n-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"s-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"nesw-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"ne-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"sw-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"nwse-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"nw-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS 는 지원하지 않습니다.
"se-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

참고

- cursor 속성값을 설정하지 않으면 undefined 가 설정되고 "auto" 로 동작합니다.

- disable 상태인 서브컨트롤이 있는 컴포넌트의 경우 마우스 포인터는 서브컨트롤 영역에서
   서브컨트롤의 disable status값이 적용되지 않고, 컴포넌트의 enable status 설정값이 적용됩니다.
   서브컨트롤과 컴포넌트가 모두 disable 상태일 때는 parent 의 enable status 설정값이 적용됩니다.

id

TitleBarButtonControl의 고유 식별자를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.id

문법 설정

id	TitleBarButtonControl를 구별할 수 있는 유일값을 갖습니다.

참고

-  addChild나 insertChild 메소드를 사용하여 컴포넌트를 등록할때 parent 가 자식컴포넌트를 구별하기 위한 고유한 key값입니다.

- 속성명이나 메소드명과 같은 예약어를 id 속성값으로 설정할 경우 오류가 발생할 수 있습니다.

- 컴포넌트의 속성은 아니지만 편의를 위하여 넥사크로 스튜디오에서 설정할 수 있는 기능이 제공됩니다.

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

name

TitleBarButtonControl 의 이름을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☑ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.name[= strName]

문법 설정

strName	컴포넌트의 이름을 설정합니다.

참고

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

-nexa-border

TitleBarButtonControl 의 테두리를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.border[= strborder]

문법 설정

strborder ::= <line-width> <line-style> <color> [,<line-width> <line-style> <color>]{3} <line-width> ::= 'thin' \| 'medium' \| 'thick' \| <nWidth> 'px' <line-style> ::= 'none' \| 'hidden' \| 'dotted' \| 'dashed' \| 'solid' \| 'double' \| 'groove' \| 'ridge' \| 'inset' \| 'outset' <color> ::= <NamedColor> \| <NumericColor> 1회 입력 : top/right/bottom/left 에 모두 적용됩니다. 2회 입력 : top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다. 3회 입력 : top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다. 4회 입력 : top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다. * 2회~4회 입력은 border-radius 속성값이 설정되지 않은 경우만 적용됩니다.
* XCSS -nexa-border : 1px solid #999999; -nexa-border : 1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999; * Script ( normal property ) this.TitleBarButtonControl00.border = "1px solid #999999"; this.TitleBarButtonControl00.border = "1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999";
<line-width>	테두리 선의 두께를 설정합니다. "thin" 설정 시 1 pixel 두께로 테두리가 표시됩니다. "medium" 설정 시 3 pixel 두께로 테두리가 표시됩니다. "thick" 설정 시 5 pixel 두께로 테두리가 표시됩니다. <nWidth> 설정 시 <nWidth> pixel 두께로 테두리가 표시됩니다.
<nWidth>	테두리 선의 두께를 pixel 단위로 설정합니다. "px" 단위는 생략할 수 없습니다.
<line-style>	테두리 선의 스타일을 설정합니다. "none" 설정 시 테두리가 표시되지 않습니다. "hidden" 설정 시 테두리가 표시되지 않습니다. "dotted" 설정 시 테두리가 점선으로 표시됩니다. "dashed" 설정 시 테두리가 긴 점선으로 표시됩니다. "solid" 설정 시 테두리가 실선으로 표시됩니다. "double" 설정 시 테두리가 두줄로 표시됩니다. "groove" 설정 시 테두리가 들어간 것처럼 보이게 입체적으로 표시됩니다. "ridge" 설정 시 테두리가 올라온 것처럼 보이게 입체적으로 표시됩니다. "inset" 설정 시 컴포넌트가 들어간 것처럼 보이게 테두리가 입체적으로 표시됩니다. "outset" 설정 시 컴포넌트가 올라온 것처럼 보이게 테두리가 입체적으로 표시됩니다.
<color>	테두리 색상을 색상이름 또는 색상코드로 설정합니다.
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- -nexa-border 속성값을 설정하지 않으면 undefined 가 설정되고, "medium none #999999" 로 동작합니다.

- <line-style> 이 "double" 일 때 두 줄을 다른 색으로 설정할 수 없습니다.
<color> 에 설정된 색이 두 줄에 모두 적용됩니다.

- 스크립트로 접근 시 속성명은 "border"를 사용해야 합니다.

◆ Nexacro Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 top > right > bottom > left 순으로 겹쳐서 표시됩니다.

- <line-style> 에 "double","groove","ridge","inset","outset" 값을 설정해도 적용되지 않습니다.

- <line-width> 에 "thin","medium","thick" 값을 설정해도 적용되지 않습니다.

◆ Web Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 웹브라우저에 따라 테두리가 겹쳐지는 순서가 다르게 처리될 수 있습니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있으면
두께는 각 테두리 별로 따로 적용되고, 색상은 top 에 설정된 색이 적용됩니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있어도
일부 브라우저는 각 테두리의 색상이나 두께가 각각 적용됩니다.

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

-nexa-icon

TitleBarButtonControl에서 텍스트와 함께 표시 될 아이콘 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.icon[= strurl]

문법 설정

strurl ::= 'URL(" ' <Theme-Image> \| <Web-Image> ' ")'
* XCSS -nexa-icon : "URL('./images/smiley.gif')"; -nexa-icon : "URL('theme://images/border.png')"; * Script ( normal property ) this.TitleBarButtonControl.icon = "URL('./images/smiley.gif')" ; this.TitleBarButtonControl.icon = "URL('theme://images/border.png')";
<Theme-Image>	테마에 선언된 이미지를 "theme://images/이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.

참고

- -nexa-icon 속성값을 설정하지 않으면 undefined 가 설정됩니다.

- 스크립트로 접근 시 속성명은 "icon" 을 사용해야 합니다.

- 아이콘 이미지가 표시되는 위치는 -nexa-icon-position 속성에서 설정합니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.

-nexa-padding

TitleBarButtonControl 영역의 안쪽 여백을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.-nexa-padding

문법 설정

-nexa-padding ::= <npadding>'px'{4}
* XCSS -nexa-padding : 5px 5px 5px 5px;
<npadding>	TitleBarButtonControl 영역의 안쪽 여백을 pixel 단위로 설정합니다. 값을 1회 입력 시 top/right/bottom/left 에 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다. "px" 단위를 생략할 수 없습니다.

-nexa-padding ::= <npadding>'px'{4}

* XCSS
-nexa-padding : 5px 5px 5px 5px;

TitleBarButtonControl 영역의 안쪽 여백을 pixel 단위로 설정합니다.

값을 1회 입력 시 top/right/bottom/left 에 모두 동일한 값이 적용됩니다.

값을 2회 입력 시 top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다.

값을 3회 입력 시 top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다.

값을 4회 입력 시 top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다.

"px" 단위를 생략할 수 없습니다.

참고

- -nexa-padding 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다.

- -nexa-padding 속성은 컴포넌트에 표시되는 아이콘과 텍스트의 영역에 적용됩니다.

- TitleBarButtonControl 의 너비보다 표시되는 컨텐츠의 너비가 길면 "right" 방향의 padding 값이 무시됩니다.

- Div 와 같이 자식을 갖을 수 있는 컴포넌트에서 -nexa-padding 속성은 자식 컴포넌트의 위치에 영향을 주지 않습니다.

-nexa-rtl-background-image

TitleBarButtonControl 의 rtl 속성이 true 로 적용될 때 배경에 표시될 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.-nexa-rtl-background-image

문법 설정

strRtlBgImage ::= "URL(' " <Theme-Image> \| <Web-Image> " ')"
* XCSS -nexa-rtl-background-image : URL("http://localhost/Test.jpg"); -nexa-rtl-background-image : URL("theme://images/Test.jpg");
strRtlBgImage	"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다. background 속성에 설정된 값 중 이미지만 설정한 이미지로 대체됩니다. background 속성에 설정된 이미지 이외의 값은 동일하게 적용됩니다.
<Theme-Image>	테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.

참고

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

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-background-image 속성값을 설정하지 않으면 background 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 속성에 배경색이 설정되어 있을 경우 배경색 위에 이미지가 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   background 속성에 그라데이션이 설정되어 있을 경우 오동작이 발생할 수 있습니다.

-nexa-rtl-icon

TitleBarButtonControl 의 rtl 속성이 true 로 적용될 때 표시될 아이콘 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.-nexa-rtl-icon

문법 설정

strRtlIcon ::= "URL(' " <Theme-Image> \| <Web-Image> " ')"
* XCSS -nexa-rtl-icon : URL("http://localhost/Test.jpg"); -nexa-rtl-icon : URL("theme://images/Test.jpg")
strRtlIcon	"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다.
<Theme-Image>	테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.

참고

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

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-icon 속성값을 설정하지 않으면 -nexa-icon 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 아이콘 이미지가 표시되는 위치는 -nexa-icon-position 속성으로 설정합니다.

-nexa-text-align

TitleBarButtonControl 에 표시되는 텍스트 또는 컨텐츠의 가로 정렬 방식을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.textAlign[= strtextalign]

문법 설정

strtextalign ::= 'left' \| 'center' \| 'right'
* XCSS -nexa-text-align : center; * Script ( normal property ) this.TitleBarButtonControl00.textAlign = "center";
"left"	텍스트 또는 컨텐츠를 왼쪽으로 정렬합니다.
"center"	텍스트 또는 컨텐츠를 가운데로 정렬합니다.
"right"	텍스트 또는 컨텐츠를 오른쪽으로 정렬합니다.

참고

- -nexa-text-align 속성값을 설정하지 않으면 undefined 가 설정되고, XCSS 에 정의된 값으로 동작됩니다.
   XCSS 에도 정의된 값이 없을 경우 하단의 기준으로 컴포넌트에 따라 동작됩니다.
   > FileDownload, Button, IconControl, IconTextControl 은 "center" 로 동작됩니다.
   > MaskEdit 는 type 속성값이 "number" 이면 "right" 로 동작되고, "string" 이면 "left" 로 동작됩니다.
   > Grid 는 displaytype 속성값에 따라 동작되는 값이 다릅니다.
   > 나머지 컴포넌트는 "left" 로 동작됩니다.

- 스크립트로 접근 시 속성명은 "textAlign"을 사용해야 합니다.

- TitleBarButtonControl 의 너비보다 표시되는 텍스트의 길이가 크면 "right" 를 설정해도 "left" 로 동작됩니다.


◆ web runtime environment 제약

- -nexa-text-align 속성값이 "right" 일 때 font 속성에 "italic" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

-nexa-vertical-align

TitleBarButtonControl 에 표시되는 텍스트 또는 컨텐츠의 세로 정렬 방식을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.verticalAlign[= strvertalign]

문법 설정

strvertalign ::= 'top' \| 'middle' \| 'bottom'
* XCSS -nexa-vertical-align : middle; * Script ( normal property ) this.TitleBarButtonControl00.verticalAlign = "middle";
"top"	텍스트 또는 컨텐츠를 위쪽으로 정렬합니다.
"middle"	텍스트 또는 컨텐츠를 가운데로 정렬합니다.
"bottom"	텍스트 또는 컨텐츠를 아래쪽으로 정렬합니다.

참고

- -nexa-vertical-align 속성값을 설정하지 않으면 undefined 가 설정되고, "middle" 로 동작합니다.

- 스크립트로 접근 시 속성명은 "verticalAlign"을 사용해야 합니다.

opacity

TitleBarButtonControl 영역의 투명도를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

TitleBarButtonControl.opacity[= stropacity]

문법 설정

* XCSS opacity : 0.8; opacity : 80%; * Script ( normal property ) this.TitleBarButtonControl00.opacity = "0.8"; this.TitleBarButtonControl00.opacity = 0.8; this.TitleBarButtonControl00.opacity = "80%";
strOpacity	0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다. 0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다. 1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다. XCSS는 숫자 또는 퍼센트 값으로만 설정할 수 있습니다. Script는 숫자 또는 문자(숫자, 퍼센트 값)로 설정할 수 있습니다.

* XCSS
opacity : 0.8;
opacity : 80%;

* Script ( normal property )
this.TitleBarButtonControl00.opacity = "0.8";
this.TitleBarButtonControl00.opacity = 0.8;
this.TitleBarButtonControl00.opacity = "80%";

strOpacity

0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다.

0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다.

1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다.

XCSS는 숫자 또는 퍼센트 값으로만 설정할 수 있습니다.

Script는 숫자 또는 문자(숫자, 퍼센트 값)로 설정할 수 있습니다.

참고

- opacity 속성값을 설정하지 않으면 undefined 가 설정되고, 1 로 동작합니다.

- Div 와 같이 자식 컴포넌트를 가질 수 있는 컴포넌트에 opacity 속성을 적용하면 자식 컴포넌트도 함께 적용됩니다.

- 부모와 자식 컴포넌트에 각각 opacity 속성이 설정되어 있으면 자식 컴포넌트의 투명도는 부모의 투명도에 추가적으로 적용됩니다.
   예를 들어 부모의 opacity가 0.5 이고 자식의 opacity가 0.4 이면 결과적으로 자식 컴포넌트는 0.2 의 투명도가 적용됩니다.