이 섹션에서는 다른 요소를 그룹화하고 제어하는 데 사용되는 컨테이너 요소에 대해 다룹니다.
페이지의 최상위 부모로 페이지를 사용하여 모든 페이지의 요소가 계층 구조를 형성합니다.
컨테이너는 요소를 포함하고 페이지에서 그들의 동작을 제어하는 데 사용됩니다. 요소를 컨테이너 내에 배치하여 그것을 부모로 만들고 요소(들)를 그것의 자식으로 만들 수 있습니다. 요소 트리는 부모-자식 관계의 계층 구조를 표시합니다.
Bubble에는 다르게 동작하는 여섯 가지 컨테이너 유형이 있습니다. 다양한 유형이 어떻게 동작하는지 알아내는 것이 Bubble에서 디자인을 마스터하는 핵심이므로 이러한 동작에 대해 알아보는 것이 좋습니다.
자세한 정보 및 전체 기사 링크는 각 컨테이너 유형을 클릭하세요:
Groups – 페이지 계층 구조를 구축하는 데 직접 배치
Repeating Groups – 유연한 디자인으로 항목 목록을 표시하는 데 사용
Table element - 깔끔한 행과 열로 항목 목록을 표시하는 데 사용
Popups – 모든 다른 요소 위에 그룹을 표시(예: 메시지 또는 가입 양식)
Floating Groups – 화면 가장자리에 부착된 상태로 페이지 위에 떠다님(예: 내비게이션 바)
Group Focus – 초점이 맞춰져 있는 동안 계속 표시(예: 드롭다운 메뉴)
Styling Containers
컨테이너는 투명하게 설정될 수 있지만 다른 요소와 마찬가지로 배경 스타일, 둥근 정도, 테두리 및 그림자를 가질 수도 있습니다.
그룹은 왼쪽처럼 투명 할 수 있고 스타일을 지정할 수도 있습니다. 오른쪽 그룹에는 흰색 배경색, 둥근 모서리 및 그림자가 있습니다.
그룹의 스타일 설정에는 더블 클릭하거나 요소 트리에서 클릭하여 액세스할 수 있습니다.
Loading data into containers
컨테이너는 시각적 요소뿐만 아니라 다양한 종류의 데이터를 보유하는 데에도 사용할 수 있습니다. 예를 들어 사용자를 편집하는 양식을 작업 중이고 이름, 전화 번호 및 주소에 대한 입력 필드가 있는 경우 컨테이너의 데이터 소스를 사용자로 설정하고 사용자 데이터를 컨테이너에로드 할 수 있습니다.
컨테이너로로드 된 데이터는 해당 컨테이너의 모든 하위 요소에서 사용할 수 있습니다. 이를 통해 페이지의 일부에 특정 데이터를 로드 할 수 있습니다. 다음 예에서는 사용자에 관한 데이터를 컨테이너에로드하는 방법을 보여줍니다.
그룹에 데이터를로드하여 다른 요소 및 워크 플로에서 참조할 수 있습니다.
Referencing data in elements
위의 예에서 현재 사용자를 컨테이너에 로드했으며 양식의 입력 요소에서 사용자를 쉽게 참조할 수 있습니다.
그룹에 데이터를로드하면 해당 데이터를 그룹의 하위 요소에서 참조할 수 있습니다. 위의 예에서는 사용자의 이름을 입력 필드에 로드하고 있습니다.
위의 일러스트에서 컨테이너는 현재 사용자를 로드하고 해당 정보를 컨테이너의 하위 요소에서 사용할 수 있습니다. 스크린샷에서는 입력 필드의 설정을보고 있습니다. 우리는 Parent group의 User의 name을 참조하고 있습니다.
Referencing data in workflows
동일한 작업을 워크 플로에서 수행 할 수 있습니다. 아래의 예에서는 Save changes 버튼이 입력 필드에서 데이터를 데이터베이스에 저장하도록하려고합니다. 부모 그룹의 사용자를 참조함으로써 쉽게 저장할 수 있습니다.
버튼과 같은 요소가 데이터를 보유하는 그룹 내에 배치되면 해당 요소와 관련된 워크 플로에 데이터를 참조 할 수 있습니다. 위의 예에서는 버튼의 부모 그룹에로드 된 사용자를 참조하고 있습니다.
워크 플로에서 부모 그룹의 데이터를 참조하려면 워크 플로를 트리거하는 이벤트가 컨테이너의 하위 요소 중 하나에 연결되어야합니다. 예를 들어 컨테이너 내의 Save 버튼은 양식에서 변경 사항을 저장하는 워크 플로우를 트리거 할 수 있습니다.
요소 및 워크 플로에서 데이터를 참조하는 것은 Repeating Group의 셀을 포함하여 모든 그룹 유형에서 수행 할 수 있습니다.
Different ways of loading data
컨테이너에 데이터를 로드하는 두 가지 다른 방법이 있습니다.
•
컨테이너의 데이터 소스를로드 데이터로 설정할 수 있습니다. 위의 예에서는 Current user를로 드하고 있지만 Do a search for를 사용하여 데이터베이스 검색을 수행하는 등 다른 방법으로도로드 할 수 있습니다.
현재 사용자에 대한 유형을 User로 설정하고 데이터 소스를 Current user로 설정하면 Bubble이 컨테이너에 현재 사용자에 대한 데이터를 로드하도록 지시합니다.
•
워크 플로를 사용하여 데이터를 컨테이너로 푸시 할 수 있습니다. 이는 데이터 로드가 사용자 조작의 결과가 되도록하려는 경우 유용합니다.
이 예에서는 Display data in group/popup 작업을 사용하여 사용자를 검색하고 해당 데이터를 그룹에 로드하는 방법을 보여줍니다. 그런 다음 그룹 내의 요소 및 워크 플로에 포함된 사용자를 참조 할 수 있습니다.
첫 번째 방법은 페이지가로드 될 때 데이터를 로드하며 두 번째 방법은 사용자 조작의 결과로 워크 플로를 실행하기를 기다립니다. 후자의 방법을 사용하여 사용자가 편집 할 사용자를 선택하도록 할 수 있습니다.
Resetting a container
컨테이너를 재설정하여 표시되는 항목을 삭제할 수 있습니다. 컨테이너 재설정 작업을 사용하면 항목이 데이터 소스로 정의된 것으로 되돌려집니다. 이는 재설정이 비어 있다는 것이 아니라 초기 상태로 재설정되는 것을 의미합니다.
컨테이너의 내용을 변경할 때마다 실제로는 재설정되어 새로운 항목이 표시됩니다. 따라서 모든 하위 요소(예: 텍스트를 포함하는 입력 필드)는 부모 컨테이너로로드되는 데이터를 반영하여 내용을 업데이트합니다.
Groups and responsive settings
그룹을 사용하여 내부의 요소의 반응 형 동작을 제어할 수 있습니다. 예를 들어 폭이 200픽셀 이상이 되지 않도록 원하는 경우 세 개의 입력 필드를 보유하는 그룹에 최대 폭을 설정할 수 있습니다. 이렇게 하면 모든 요소에 최대 폭이 적용되며 각각에 개별적으로 적용할 필요가 없습니다.
그룹을 사용하여 내부 요소의 반응 형 동작을 효율적으로 설정하는 것이 반응 형 디자인을 효율적으로 설정하는 핵심입니다. 이 예에서는 그룹의 최대 폭을 480픽셀로 설정했습니다. 이렇게 하면 해당 그룹 내의 요소의 너비도 제어합니다.
