이 섹션에서는 그룹 타입 그룹 포커스에 대해 다룹니다. 이 그룹은 포커스를 유지하는 한 계속해서 보여지며 일반적으로 드롭다운 메뉴에 사용됩니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
그룹 포커스에는 두 가지 주요 특징이 있습니다.
•
포커스를 유지하는 동안에만 표시됩니다. 이 경우 포커스는 페이지의 다른 곳을 클릭할 때까지 유지됩니다.
•
다른 요소에 대해 일정 픽셀 수로 표시됩니다.
이러한 특징으로 인해 그룹 포커스에는 여러 가지 전형적인 사용 사례가 있습니다.
•
맥락 메뉴
•
플로팅 액션 버튼
•
드롭다운 메뉴
•
툴팁
위의 예에서 그룹 포커스의 전형적인 사용 사례를 볼 수 있습니다. 그림자가 들어간 흰색 직사각형이 그룹 포커스이며, 아이콘이 클릭될 때 그룹 포커스에 부드러운 전환을 주기 위해 요소 애니메이션 액션을 사용하고 있습니다. 그룹 포커스 외부를 클릭하면 자동으로 숨겨지며 별도의 작업이 필요하지 않습니다.
Bubble 편집기에서 몇 가지 사항을 주목할 수 있습니다.
•
참조 요소가 아이콘으로 설정되어 있습니다. 이는 그룹 포커스가 아이콘과 관련하여 표시되도록합니다.
•
왼쪽으로 밀어내기 위해 -150 픽셀의 오프셋을 부여했습니다. 이것은 간단한 미 esthetics 선택입니다.
•
아이콘이 클릭될 때 요소 애니메이션 액션이 표시됩니다. 다시 숨기려면 특별한 작업이 필요하지 않습니다.
•
드롭다운 메뉴를 표시하기 위해 SlideDownIn 애니메이션을 선택했으며 기본보다 약간 더 짧은 기간을 부여했습니다. 이러한 옵션은 모두 미 esthetics에 따른 것입니다.
Using Group Focus in Repeating Groups
Repeating Groups은 다른 그룹 유형과 약간 다르게 동작합니다. 여러를 포함하기 때문에 Repeating Group 셀 내부의 요소를 직접 참조할 수 없습니다. Bubble은 어떤 셀을 참조하려고 하는지 알 수 없기 때문입니다.
그룹 포커스를 사용할 때 이것은 도전 과제를 만듭니다. 왜냐하면 이 그룹은 어디에 표시할지 알기 위해 다른 요소를 참조할 수 있어야 하기 때문입니다. 그러나 이를 해결하는 방법이 있습니다. 즉, 그룹 포커스와 참조할 요소를 담고 있는 Reusable Element 내부에 그룹 포커스와 해당 Reusable Element를 놓은 다음 해당 Reusable Element를 Repeating Group 내에 배치하면 됩니다.
이것은 Repeating Group에 맥락 메뉴를 배치하려는 시나리오에서 유용합니다.
위의 예에서 클릭 가능한 아이콘과 그룹 포커스는 모두 재사용 가능한 요소 내에 포함되어 있습니다. 그런 다음이 재사용 가능한 요소는 Repeating Group의 각 셀에 복제됩니다. 현재 행의 사용자에게 관련된 드롭다운 메뉴에 적용할 작업을 수행하려면 재사용 가능한 요소의 '콘텐츠 유형'을 '사용자'로 설정해야 합니다.
그런 다음 Repeating Group에 배치한 Reusable Element를 선택하고 데이터 소스를 '현재 셀의 사용자'로 설정하면 됩니다.
Other ways to learn
Core reference: group focus settings
Video lessons
