퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. UX 마크업
  4. 리터럴[Literals]

리터럴[Literals]

UX 마크업 리터럴

이 문서에서는 숫자, 벡터, 색상 및 문자열이 UX 마크업에서 어떻게 해석되는지 자세히 설명합니다.

숫자(Numbers)

모든 숫자 유형(float, int, double, Size 등)은 선택적 소수 구분 기호인 마침표(.)를 사용하여 JavaScript의 숫자나 Uno의 double과 같이 표기할 수 있습니다.

유효한 숫자:

1
2
3
4
1
1.3
13
.4

예문:

1
<Panel Width="10.5" />

단위(Units)

일부 속성은 %(percent[퍼센트]), pt(points[포인트]) 또는 px(pixels[픽셀]) 단위를 허용합니다. 이것은 단순히 숫자 리터럴 뒤에 단위를 배치하여 사용합니다.

예문:

1
<Panel Width="50%" Height="200px" />

기본 단위는 unspecified(지정되지 않음) 입니다. 이것은 지정된 단위의 값으로 산술에 관련되지 않는 한 pt(포인트)로 해석됩니다.

벡터(Vectors)

벡터 유형(float2, float3, float4, Size2 등)은 다음과 같은 규칙에 따라 해석되는 다양한 방법으로 사용될 수 있습니다.

단일 숫자 값이 제공된 경우 이 값은 각 컴포넌트에 대해 반복됩니다.

예문:

1
<Panel Margin="10" />

아래와 같습니다:

1
<Panel Margin="10, 10, 10, 10" />

쉼표(,)로 구분된 두 개의 숫자(X와 Y)가 제공되면 이 두 컴포넌트는 대상 벡터의 크기까지 [X, Y, X, Y]로 반복됩니다.

1
<Panel Margin="4, 8" />

아래와 같습니다:

1
<Panel Margin="4, 8, 4, 8" />

이는 여백(Margin)의 경우 두 개의 컴포넌트가 각각 수평(왼쪽/오른쪽) 및 수직(위쪽/아래쪽) 여백을 지정한다는 것을 의미합니다.

쉼표(,)로 구분된 세 개의 숫자(X, Y 및 Z)가 제공되는 경우 이 컴포넌트는 필요한 경우 나머지를 1.0으로 채웁니다.

1
<Panel Color="1,0,1" />

아래와 같습니다:

1
<Panel Color="1,0,1,1" />

즉, 색상(Color)의 경우 알파 채널(W)은 기본적으로 1로 설정되고 달리 지정하지 않으면 불투명 색상이 지정됩니다.

벡터 표현식

표현식의 일부로 벡터를 작성하려면 소괄호를 사용하세요.

1
<Panel Color="(1,0,1,1) / {fadeValue}" />

크기 벡터(Size Vectors)

일부 속성은 Size2 유형이며 X와 Y에 대해 서로 다른 단위를 사용할 수 있습니다. 이러한 속성의 예는 Element.Offset입니다. 이러한 값은 벡터와 같이 표시되며, 각 벡터 컴포넌트에 단위를 지정할 수 있습니다.

1
<Panel Offset="10%, 20px" />

색상(Colors)

색상은 float4 유형(또는 알파 채널이 없는 경우 float3)으로 표시됩니다. 이것은 벡터와 동일한 방법으로 사용할 수 있음을 의미합니다(위 참조).

색상 작업을 쉽게하기 위해 float4 및 float3 벡터는 # 기호를 사용하여 16진수 표기법으로 표시할 수 있습니다.

1
<Panel Color="#18f" />

16진수 색상(벡터)은 3, 4, 6 또는 8 개의 16진수로 주어질 수 있으며 다음과 같이 해석됩니다.

  • #RGB (또는 #XYZ)
  • #RGBA (또는 #XYZW)
  • #RRGGBB (또는 #XXYYZZ)
  • #RRGGBBAA (또는 #XXYYZZWW)

알파 채널(A 또는 W)을 생략하면 1.0(f 또는 ff)이 할당됩니다.

문자열(Strings)

문자열 속성은 다른 속성과 약간 다르게 파싱됩니다. 문자열 속성은 기본적으로 원시 문자열 리터럴로 처리됩니다.

1
<Text Value="Hello, World!" />

바인딩 표현식을 삽입하려면 다음과 같이 문자열 중간에 중괄호 표현식을 삽입하면 됩니다:

1
<Text Value="Hello, {username}!" />

표현식에서 문자열을 계산하려면 인라인 표현식(inline expression) 구문을 사용하십시오:

1
<Text Value="Hello {= toLower({username})}" />
Was this article helpful to you? Yes No

How can we help?