Text

Text 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.

컨트롤 설명

화면에 글자를 보여주는 컨트롤입니다.

InputText와 Text의 차이

InputText 컨트롤은 사용자 입력을 받는 컨트롤이기 때문에 '사용자의 행위'와 관련된 이벤트 종류 (Input, FocusIn) 등을 설정하여 이벤트를 발생시킬 수 있습니다.

Text 컨트롤은 '글자' 그 자체를 보여주는 기능을 합니다. 따라서 '클릭 이벤트'설정만 가능하며, 사용자 입력에 따른 이벤트 종류 설정이 없습니다.

스타일 유형

다양한 스타일 유형들을 제공하고 있습니다.

디자인(Design) 모드

디자인 속성

말줄임 사용

말줄임을 사용하면 컨트롤의 너비보다 컨텐츠가 길어지면 자동적으로 말줄임('...' )으로 표현됩니다. 단, 말줄임을 사용하려면 컨트롤의 너비가 설정되어 있어야 합니다.

디자인 공통 속성

개발(Dev) 모드

컬렉션 키

Text컨트롤에 Text를 표현하는 방법 중 하나입니다.

컬렉션 키를 지정하여 해당 하는 값을 동적으로 보여줄 수 있습니다.

텍스트

Text컨트롤에 Text를 표현하는 방법 중 하나입니다.

  • 단순 텍스트를 보여줄 수 있습니다.

Current.sector값은 텍스트 탭에서 {=콜렉션키} 로 사용가능하지만 Current.sector 외의 _base, _v, 다른 카테고리의 섹터등을 문장에 포함시키기 위해서는 {% %} 를 사용하여 작성하셔야 합니다.

대체 텍스트에 대한 자세한 설명은 대체 텍스트 사용하기를 참고하세요.

Event

클릭 이벤트 사용

Text를 클릭했을 때 발생 시키고 싶은 이벤트를 지정할 수 있습니다.

클릭 시 스텝 이동

Text를 클릭했을 때 이동하고 싶은 Step을 지정할 수 있습니다.

  • 스텝 아이디 : 이동하고 싶은 Step을 선택합니다.

  • 스텝 이동 타입

    • 시작스텝 : 첫 페이지 Step으로 이동합니다.

    • 다음스텝 : 지정한 다음 Step으로 이동합니다.

    • 직전스텝 : 현재 페이지 직전의 Step으로 이동합니다.

  • 필수값 체크 무시

    • Check : 컨트롤 상태가 필수입력인 컨트롤이 입력되지 않아도 무시하고 Step이동 합니다.

    • Uncheck : 컨트롤 상태가 필수입력인 컨트롤이 입력되지 않으면 Step이동이 불가능합니다.

  • 다음 스텝이동 애니메이션 : Step이 이동될 때의 애니메이션입니다.

    • 우측에서 나오기 : 우측에서 다음 Step이 나타나는 애니메이션입니다.

  • 조건 : Step을 이동하기 위한 을 작성합니다.

컬렉션의 값 유무로 판단
_c.activeSector['collectionKey'] === 'flextudio'
컴포넌트의 Input값 유무로 판단
f.Component("f_52766").getInputValue() === 'hi'

공통 개발 속성

Last updated