Icon
모바일 어플리케이션에 가장 많이 사용되는 아이콘을 선별하여 제공한다.
기본으로 제공되는 아이콘은 흰색의 아이콘 모양과 반투명의 검은 원형 배경으로 이루어져있어
어떤 배경색과도 대비를 이룰 수 있다.
기본코드
data-icon 속성값으로 생성할 아이콘 이름을 지정하여 아이콘을 추가한다.
Home
- <a href="#" data-role="button" data-icon="home">Home</a>
아이콘의 위치
기본적으로 버튼에 추가된 아이콘은 버튼내용 왼쪽에 위치한다.
data-iconpos 속성을 추가하여 아이콘을 버튼내용 오른쪽, 위쪽, 아래쪽에 위치시킬 수 있다.
- <a href="#" data-role="button" data-icon="gear" data-iconpos="left">왼쪽</a>
- <a href="#" data-role="button" data-icon="gear" data-iconpos="right">오른쪽</a>
- <a href="#" data-role="button" data-icon="gear" data-iconpos="top">위쪽</a>
- <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom">아래쪽</a>
data-iconpos 속성값을 "notext"로 지정하여 버튼에 아이콘만 존재하도록 설정할 수 있다.
gear
home
grid
- <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">gear</a>
기본 아이콘 26종
data-icon 속성에 각 아이콘의 이름을 넣어 아이콘을 생성한다.
사용자 정의 아이콘
전자정부 모바일 표준프레임워크에서 아이콘에 적용하는 기본 CSS 스타일을 변경하여 사용자 정의 아이콘을 사용할 수 있다.
사용자 정의 아이콘(Custom Icon)을 사용하기 위해서는 data-icon 속성값을 고유한 이름으로 지정하여 사용해야한다.
기존의 아이콘과 통일성을 유지하려면 아이콘의 사이즈를 18X18 픽셀로 지정하고 이미지를 PNG-8, alpha transparency 로 저장한다.
chat
magnify
piggy
egov
- .ui-icon-[ideal_icon_name] {
- background-image: url(/images/egovframework/mbl/cmm/[icon_filename]);
- background-repeat: no-repeat;
- }
아이콘 색상 지정
data-theme 속성에 테마를 적용하여 아이콘의 색상을 변경한다.
- <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="h">arrow-l</a>