이 섹션에서는 그룹의 한 종류인 Group Focus(그룹 포커스)를 다룹니다.
(1) Group Focus의 특징과 예시
이 그룹은 포커스가 있는 동안 계속 화면에 표시되며 일반적으로 드롭다운 메뉴에 사용됩니다.
1. Group Focus의 특징
: 두 가지 주요 특징이 있습니다.
- 초점이 맞춰져 있는 동안에만 계속 화면에 표시됩니다. 여기에서 초점은 페이지의 다른 곳을 클릭할 때까지를 의미합니다.
- 이 그룹의 위치는 다른 element(요소)에서 떨어진 픽셀 수만큼 상대적으로 표시됩니다.
2.Group Focus 예시
:이러한 기능은 몇 가지 일반적인 사용 사례를 제공합니다.
- 상황에 맞는 메뉴
- 플로팅 액션 버튼
- 드롭다운 메뉴
- 툴팁
(2) Group Focus로 드롭다운 메뉴 설정
위의 예시에서 Group Focus(그룹 포커스)의 일반적인 사용 사례를 볼 수 있습니다.
- 그림자가 있는 흰색 사각형은 그룹 포커스이며 아이콘을 클릭하면 element 애니메이션 동작을 사용하여 부드럽게 전환합니다.
- Group Focus 외부에 클릭이 발생하는 즉시 별도의 조치 없이 자동으로 숨겨집니다.
위의 예제에서 Bubble 편집기를 살펴보면 몇 가지 사항을 확인할 수 있습니다.
- Reference element는 이름이 Icon Dropdown menu (아이콘)으로 설정되었습니다.
- 이는 그룹 포커스의 표시 위치가 아이콘과 관련하여 표시됨을 의미합니다.
- 아이콘의 왼쪽에 위치하기 위해 -150픽셀의 오프셋을 지정했습니다.
- 이것은 단순히 표시 위치를 결정하기 위한 선택입니다
- 아이콘을 클릭하면 element 애니메이션 작업이 표시됩니다. (워크플로우 지정)
- 다시 숨기기 위해 필요한 조치가 없습니다. Group Focus 의 밖을 클릭 시 화면에서 사라집니다.
- 워크플로우에서 SlideDownIn 애니메이션을 선택하여 드롭다운 메뉴를 표시하고 기본값보다 약간 짧은 지속 시간을 설정했습니다.
(3) 반복 그룹(Repeating Group)에서 Group Focus 사용
반복그룹은 여러 셀을 포함하기 때문에 다른 그룹 유형과 약간 다르게 동작합니다. 따라서 Bubble은 참조하려는 셀을 알 수 없기 때문에 반복 그룹 셀 내부의 요소를 직접 참조할 수 없습니다.
- 이것은 그룹 포커스를 사용할 때 다른 요소를 참조하여 표시할 위치를 알 수 있는지에 따라 달라지기 때문에 문제가 됩니다. 그러나 이 문제를 해결할 수 있는 방법이 있습니다.
참조해야 하는 요소와 그룹 포커스를 재사용 가능 요소(Resuable Element) 내부에 배치한 다음, 해당 재사용 가능 요소(Resuable Element)를 반복 그룹 내부에 배치하면 제대로 작동합니다.
이는 반복 그룹에 아래와 같이 편집 메뉴를 배치하려는 시나리오에서 유용합니다.
- 위의 예시에서 클릭 가능한 아이콘과 그룹 포커스는 모두 재사용 가능한 요소(Resuable Element) 내에 포함되어 있습니다. 이 재사용 가능한 요소(Resuable Element)는 반복 그룹의 각 셀에 대해 복제됩니다.
- 예시에서와 같이 현재 행의 사용자와 관련된 드롭다운 메뉴에 작업을 적용할 수 있도록 하려면 재사용 가능 요소(Resuable Element)의 콘텐츠 유형을 사용자로 설정해야 합니다.
- 이 설정은 재사용 가능 요소(Resuable Element)를 편집하고 재사용 가능 요소 자체에 대한 속성 편집기를 열 때 설정됩니다.
- 그런 다음 반복 그룹에 배치한 재사용 가능 요소(Resuable Element)를 선택할 때 데이터 소스를 현재 셀의 사용자(Current cell`s user)로 설정합니다.
- 재사용 가능 요소(Resuable Element)의 데이터 소스를 현재 셀의 콘텐츠로 설정하여 해당 특정 셀의 데이터를 재사용 가능 요소(Resuable Element)로 전달하고 드롭다운 메뉴의 작업에 직접 연결 전달할 수 있습니다.
