Bubble.io에서 네비게이션 바를 어떻게 사용자 정의하나요?

Bubble.io에서 탐색 바를 사용자 지정하는 것은 해당 바와 해당 기능을 앱의 요구에 맞게 설계할 수 있는 일련의 단계를 포함합니다. 이러한 단계를 읽고 따르면보다 원활한 경험을 얻을 수 있습니다:

1단계: Bubble.io 편집기에서 프로젝트 열기
Bubble.io 계정에 로그인하고 탐색 바를 사용자 정의하려는 프로젝트를 엽니다. 새 탐색 바를 추가하는 경우에는 이를 표시하려는 페이지로 이동합니다.

2단계: 재사용 가능한 요소 추가
탐색 바는 일반적으로 재사용 가능한 요소로 만들어져 서로 다른 페이지 간에 손쉽게 이용할 수 있습니다. 새로운 재사용 가능한 요소를 추가하려면:

• Bubble 편집기의 왼쪽 상단에 있는 페이지 탐색 메뉴를 엽니다.
• 재사용 가능한 요소 섹션으로 스크롤합니다.
• '새로운 재사용 가능한 요소 추가'를 클릭합니다.

3단계: 탐색 바 디자인
텍스트, 버튼, 아이콘 또는 드롭다운과 같은 요소를 추가하고 배열하여 탐색 바를 디자인합니다. 속성 편집기에서 이러한 요소의 크기, 색상, 글꼴 등을 조정하여 앱의 스타일에 맞게 사용자 정의합니다.

4단계: 탐색 링크 설정
탐색 바의 각 부분이 사용자를 어디로 이동시킬지 결정합니다:

• 다른 페이지로 연결해야 하는 텍스트 또는 버튼의 경우, '이 요소가 클릭될 때' 이벤트를 사용하여 워크플로우를 생성합니다.
• 워크플로우 내에서 '페이지로 이동'액션을 사용하여 원하는 페이지로의 네비게이션을 설정합니다.

5단계: 기존 요소 변환 (선택사항)
페이지에 이미 있는 일련의 요소를 재사용 가능한 탐색 바로 변환하려는 경우:

• 요소를 선택합니다.
• 마우스 오른쪽 버튼을 클릭하거나 화면 상단의 '편집' 메뉴를 클릭합니다.
• '재사용 가능한 요소로 변환'을 선택합니다.

6단계: 기능 추가 (선택사항)
탐색이 더 많은 기능 (예: 동적 콘텐츠 또는 사용자 정보 표시)이 필요한 경우, 데이터를 재사용 가능한 요소에 전달할 수 있습니다. 탐색 바 재사용 가능 요소에 '컨텐츠 유형'이 설정되어 있다면:

• 페이지에 탐색 바가 위치한 곳에 데이터 소스를 설정합니다.
• 워크플로우에서 '데이터 표시' 작업을 사용하여 탐색 바에 동적 데이터를 전송합니다.
• 사용자 정의 상태를 사용하여 부모 페이지에서 재사용 가능한 요소로, 그리고 반대로 데이터를 전달합니다.

7단계: 탐색 바 저장 및 테스트
탐색 바를 디자인하고 링크를 설정한 후 프로젝트를 저장합니다. 앱을 미리 보고 탐색 항목을 클릭하여 올바른 페이지로 이동하거나 원하는 동작을 수행하는지 확인하기 위해 탐색 바를 테스트합니다.

8단계: 페이지에 적용
마지막으로, 재사용 가능한 탐색 바를 앱 내에서 원하는 위치의 어떤 페이지에서나 드래그 앤 드롭합니다. 이것은 재사용 가능한 요소이므로 탐색 바에 대한 변경 사항이 모든 페이지에서 자동으로 업데이트됩니다.

그리고, 끝입니다! 이러한 단계를 따르면 사용자들이 Bubble.io 애플리케이션을 손쉽게 탐색할 수 있는 맞춤 탐색 바를 만드는 데 도움이 될 것입니다. 사용자 경험을 유념하고 귀하의 네비게이션을 직관적이며 사용자 액션에 반응하는 것으로 만드십시오. 행복한 디자이닝이 되시길 바랍니다!