Home Back

egovframework

Footer bar

Footer bar는 브라우저 하단에 위치하며 버튼, 텝, 링크 등 컴포넌트 요소 등을 넣을 수 있다.

기본코드

Footer bar는 기본적으로 검정색으로 나타나며 Footer bar의 높이는 Title 크기에 따라 달라진다.

Footer title

색상 변경

기본 코드 <data-role="footer"> Tag에 data-theme='[적용테마: a~g]"을 추가한다. 색상 유형은 Header bar의 색상변경을 참고한다.

data-theme="b"

버튼 추가

Footer bar에 Anchor 링크를 추가하면 자동으로 버튼이 생성된다. 버튼은 여러개 생성 할수 있으며 버튼은 자동으로 오른쪽 정렬 된다. 버튼에 모양은 UX Component ICon 부분을 참조 한다.

버튼 정렬
Footer bar에서 버튼을 그룹화 할때는 Footer에 <div data-role="controlgroup" data-type="horizontal"> 로 버튼을 감싸준다

컴포넌트 추가

Footer bar에는 UX 컴포넌트를 추가 하여 화면 전환 및 조정을 용이하게 할 수 있다.

Tab 컴포넌트
Footer bar의 위치에Tab 컴포넌트를 넣어 화면간 이동을 용이하게 할 수 있다. Footer Tab 예시 보기
기타 컴포넌트
Footer bar에 다른 컴포넌트를 넣을 수 있다.

위치 선정

고정 위치
footer bar의 위치를 브라우저 맨 위/ 끝으로 고정된다. 스크롤 이벤트가 일어날 경우 Footer bar는 항상 브라우저의 맨 위와/끝에 나타난다. Header bar의 <div data-role="footer">에 data-position="fixed"를 추가 한다 fixed position 예시 보기
전체 화면 모드
Header/footer bar의 위치를 브라우저 맨 위/ 끝으로 고정하거나 없앨 수 있다. 이벤트가 일어날 경우 Header/footer bar가 나타나거나 없어진다. 자세한 내용은 header bar의 전체 화면 모드를 참고 한다.

Copyright(c)2012 Ministry of Security and Public Administration.