[bubble] 새로운 페이지 생성 & 헤더에 로그인버튼 넣기

 

 

새로운 페이지 생성

 

왼쪽 최상단의 Page 클릭 -> Add a new page 클릭

 

 

 

 

기존에 만들어둔 페이지의 형식을 그대로 복사하려면 clone from 에서 선택 !

 

 

 

Layout 변경하기 

처음 페이지를 생성하면 Layout Container layout이 Fixed로 지정되어있다. 

 

 

이걸 Column으로 변경 ! (앱 환경에 적합한 Layout)

 

 

 

Layout의 차이점 알아보기

 

 

Column (열) : 블럭들이 세로로 정렬되는 것 

 

보통 어플리케이션은 이렇게 세로로 정렬되면서 

스크롤로 내리면서 이용하기 때문에 

Column으로 Layout을 변경해 주어야 한다. 

 

 

 

 

 

 

 

 

 

Low (행) : 블럭들이 가로로 정렬되는 것 

 

 

 

 

 

 

 

 

 

헤더생성

헤더 같이 자주 쓰이는 것들은 component에 사용가능한 폼이 많이 있다. 

 

 

여기서 마음에 드는 헤더를 불러온 뒤 내가 원하는 방향대로 수정하면 된다. 

 

 

버튼은 가로로 나열할때는 

Elements Tree > 마우스 우클릭 > Group elements in > Row container로 변경

 

 

 

그리고 

LayOut > Fit with to Content 클릭 

그래야 다양한 화면 구도에서 깨지지 않는다. 

 

버튼에 조건 넣기 

Sign In  버튼을 User가 로그인 하지 않았을때만 보이게 하려고 한다. 

= User 가 로그인을 하면 보이지 않아야 한다. 

 

1. Conditional

When : Current User is logged in 

This element is visibele :  uncheked

 

2. Layout

This element is visible on page load :  checked

Collapse when hidden :  checked 

 

이 말은 Layout 에서 기본조건은 페이지 로드할 때 보이지만 

조건에서 로그인 되었을때는 보이지 않게 숨긴다는 의미이다. 

 

 

 

LayOut 에서 

Collapse when hidden : 조건으로 인해서 안보일 때 다른 요소가 이자리를 차지 하지 않게 하는 기능