Bubble.io 노코드 툴 -4일차-
오늘이 Design 파트 마지막 강의.
내일부터는 Workflow에 대해 배운다.
9. Understanding container elements
Containers
1. Group
하나의 그룹 container 안에 버튼 2개를 추가
버튼 2개를 포함한 container를 중앙 정렬함 > 한번에 정렬 > container 안에서 한번에 조정하는 것이 편리함.
container 밖에 있는 버튼 2개를 중앙 정렬함 > 각각 별도로 정렬해야함
container layout
위 이미지에서 open group 클릭 시에, 숨겨진 container가 toggle 형태로 보여지도록 workflow 설정
2. Repeating groups
dynamic display 가능함
노출되는 User들 중 job-title이 developer 인 경우에만 보이도록 설정하는 방법
set fixed number of rows / columns (데이터 크기에 따라 동적으로 크기 변경)
min. width / height 와 max. width / height 설정
style 제거한 후 repeating group 의 boarder 설정 가능
min. height of row, min width of column 설정
팁! layout 설정할 때 최대한 정렬과 마진설정, container layout 설정 등으로 UI 조정하기 (c.f. 일일이 드래그하면서 layout 설정)
3. Popups
popup 창의 경우 일시적으로 보이는 창이기 때문에 평소 작업시에는 보이지 않으며, 왼쪽 상단 'Elements tree' 하단에서 노출되도록 설정해야함.
10. Building demo: User registration page
유저등록 페이지를 만들어본다.
horizontal alignment로 container 내에서의 수직 순서를 변경할 수 있음
피터's 코멘트
- 툴을 익히는 가장 빠르고 쉬운 방법은 몸에 숙달될 때까지 많이 반복하는 것이다.
- 머릿 속으로 어떤 페이지가 있을 때 이것을 얼마나 빠르게 구현할 수 있는지는 반복된 노력에 달려있다.