그룹

그룹은 그룹과 레이아웃을 감싸는 컴포넌트 입니다. 스텝의 최상위 컨텐츠나 그룹 하위의 컨텐츠로 존재할 수 있습니다.

컨텐츠는 스텝을 구성하는 컴포넌트로 그룹과 레이아웃으로 구성됩니다.

그룹 > 그룹 > 그룹의 형태로 존재 할 수도 있습니다.

스텝에 그룹을 선택하면 Flextudio에서 제공하는 레이아웃 템플릿을 적용하여 화면을 구성할 수 있습니다.

디자인(Design) 모드

명칭

사용자가 그룹을 식별하기 위한 별도의 명칭을 그룹에 부여할 수 있습니다.

스타일 유형

그룹을 디자인하지 않고도 다양한 스타일을 사용할 수 있도록 기본적으로 Flextudio에서 제공하는 스타일입니다.

스크롤 타입

그룹에서 사용할 스크롤 타입을 선택할 수 있습니다.

버튼추가

  1. 더보기버튼 추가 그룹에 더보기 버튼을 추가하여 상세 데이터 조회 화면으로 이동하는 디자인을 손쉽게 추가할 수 있습니다.

  2. 편집 버튼 추가 그룹에 편집 버튼을 추가하여 상세 데이터 수정 화면으로 이동하는 디자인을 손쉽게 추가할 수 있습니다.

고정 레이아웃

스텝의 최상위 컨텐츠 그룹일때만 사용 가능합니다.

스크롤동작할 때 고정 시키고 싶은 컨텐츠에 적용하는 기능입니다. 고정이 아닌 컨텐츠에만 스크롤이 적용 됩니다.

추가기능 선택

추가기능 선택은 개발 속성에서 데이터 연결을 활성화 시켰을 경우에만 디자인 속성에서 사용 가능합니다.

  1. 사용 안함

  2. 체크박스 그룹의 레이아웃에 체크박스 기능을 활성화 시켜 아이템을 체크합니다. 체크박스를 통해 선택한 아이템 섹터(Sector)의 Status를 Selected로 변경합니다.

    • 전체선택 버튼 활성화 리스트 전체 선택 및 해제 기능을 쉽게 구현할 수 있습니다.

  1. 추가, 삭제 버튼 추가, 삭제 버튼을 통하여 리스트에 대한 편집이 가능합니다.

    • 항목(행) 삭제 버튼 활성화

      삭제 버튼으로 행을 삭제할 수 있습니다. 삭제 버튼을 클릭하면 섹터의 Status를 Delete로 변경합니다.

    • 항목(행) 추가 버튼 활성화

      추가 버튼으로 행을 추가할 수 있습니다. 추가 버튼을 클릭하면 섹터가 Status Added 상태로 추가됩니다.

    • 버튼명 항목추가 버튼의 명칭을 바꿀 수 있습니다.

    • 최대 항목(행)개수 설정 행의 최대 개수를 설정할 수 있습니다.

공통 디자인 속성

개발(Dev) 모드

그룹명(그룹아이디)

사용자가 그룹을 식별하기 위한 별도의 명칭을 그룹에 부여할 수 있습니다. 그룹 아이디는 그룹명의 오른쪽에 위치하고 있습니다. 그룹의 고유 아이디를 나타냅니다.

컨트롤상태

그룹에서는 그룹 숨기기 기능을 사용할 수 있습니다. 자세한 컨트롤 상태 항목은 컴포넌트 상태 페이지를 참고하실 수 있습니다.

로드스크립트

그룹 컴포넌트가 로드 되기 전에 실행되는 스크립트 입니다.

Data

데이터 연결

데이터와 그룹을 연결 할 수 있습니다.

  • 데이터 용도 데이터 사용 용도에 맞는 타입을 고를 수 있습니다.

  • 카테고리명 컬렉션에서 해당 카테고리명으로 된 데이터를 연결해줍니다.

이너블럭 연결

최상위 그룹이 아닌 하위 그룹에서 사용할 수 있는 기능입니다.

Event

더보기 버튼 추가 / 편집 버튼 추가

해당 그룹에 버튼을 추가하여 이동할 스텝과 이벤트를 연결 할 수 있습니다.

더보기 버튼과 편집 버튼든 디자인 속성의 버튼추가 기능으로도 추가할 수 있지만 이벤트 연결은 개발 속성에서 가능합니다.

이벤트 사용

해당 그룹에서 사용할 이벤트를 선택 할 수 있습니다. 그룹에서는 Click, ScrollEnd 두가지의 이벤트 기능을 제공하고 있습니다. [개발 모드] - [컴포넌트] -[이벤트] 페이지에서 더 자세한 내용을 확인 할 수 있습니다.

클릭 시 스텝 이동

해당 그룹을 클릭 했을 때 스텝 이동을 연결할 수 있고 조건에 맞는 스텝으로 이동합니다.

공통 개발 속성

Last updated