글자를 예쁘게 꾸며보자 decorate 적용 가이드

Intro.

static은 문자를 출력하기 위해 사용되는 단순한 기능을 갖는 녀석이지만 다른 컴포넌트들과는 다른 하나의 큰 장점이 있는데요. 바로 출력되는 텍스트에 Decorate 효과를 적용할 수 있는 점입니다.

넥사크로플랫폼의 decorate란  html의 문장의 특정 구역에 css스타일을 지정할 수 있는 span tag와 유사한 기능입니다.

선으로 텍스트를 꾸미는 css속성의 text-decoration은 입/출력 컴포넌트 모두 적용 가능한 반면 decarate는  static 즉, 출력 컴포넌트에만 적용할 수 있는 기능입니다.

decorate와 text-decoration의 비교 예시

 

What will help?

static에서 decorate 기능을 사용하기 위해서는 usedecorate 속성을 true로 하여 적용 할 수 있습니다.

usedecorate  true/false 적용 시의 비교 예시

앞서 decorate기능은 html span tag와 유사한 기능이라고 언급 하였는데요. 실제로 Generate된 화면의 소스를 개발자 도구를 통해서 보면 적용된 부분에 span tag가 입력된 것을 확인 할 수 있습니다.

chrome 브라우저 내 decorate 사용 영역 소스

하지만 nexacro platform은 웹과 전용 브라우저에서 모두 사용 가능한 제품으로 span tag의 모든 속성을 지원하지는 않지만 폰트의 크기나 굵기, 기울임과 같은 font-style 및 link효과를 사용할 수 있습니다.

Type	Description	Default	Example
fs	폰트크기(font size)를 지정	"12"	<fs v='12'>Text</fs>
fc	폰트색상(font color)를 지정	"#000000"	<fc v='red'>Text</fc>
ff	폰트종류(font face)를 지정	"굴림"	<ff v='Dotum'>Text</ff>
b	굵은(bold) 효과 지정	"false"	<b v='true'>Text</b>
i	기울임(italic) 효과 지정	"false"	<i v='true'>Text</i>
u	밑줄(under line) 효과 지정	"false"	<u v='true'>Text</u>
s	취소선(strike) 효과 지정	"false"	<s v='true'>Text</s>
l	링크(link) 효과 지정 value 에는 URL, 전화번호, 메일주소 중 하나를 설정할 수 있습니다. value 에 설정된 형태에 따라 알맞는 앱이 실행됩니다.	"false"	http://www.tobesoft.co.kr'>Text  전화걸기 <l v='mailto:manager@tobesoft.co.kr'> 메일보내기 </l>

decorate 속성 지원 표

 

how to use decorate?

text decorate기능은 Static컴포넌트 뿐만 아니라, Grid 컴포넌트의 cell이 text type 일 경우에도 사용 할 수 있습니다.

Grid cell의 displaytype을 decoratetext으로 지정할 경우 바인드 된 데이터가 usedecorate 적용된 상태로 동작합니다.

다음은 decorate 기능을 활용한 예시 입니다.

화면에서 사용된 컴포넌트는 네비게이션 메뉴, 총계를 나타내는 2개의 Static과 하단 리스트 표현을 위한 Grid와 Dataset으로 총 4개의 컴포넌트를 사용하였습니다.

Grid 및 Static 컴포넌트 decorate 적용 예시

또한 이러한 decorate와 검색 기능을 적용하면 아래와 같은 검색 화면 구성도 할 수 있습니다.

검색 적용한 decorate 기능 사용 예시

 

참고 자료

☞그리드 전체에서 검색하여 효과주기 샘플 바로가기

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro