Home Back

egovframework

Button

버튼은 핵심적인 위젯으로서 여러 플러그인에서 두루 사용된다.

기본코드

Anchor 링크에 data-role="button" 속성을 추가하면 전자정부 모바일 표준프레임워크에서 제공하는 버튼의 스타일을 적용할 수 있다.

Button

색상변경

data-theme 속성 값으로 테마를 적용하여 색상을 변경한다.(총 7가지 색상 지원)

형태변경

기본적인 버튼의 형태는 둥근형이며 사각형을 원할 시 기본코드에 data-corners="false" 속성을 추가한다.

Rectangle

버튼 그룹

여러 버튼을 하나의 그룹으로 만들려면 controlgourp 속성을 갖는 <div data-role="controlgroup"> 컨테이너에 버튼을 포함시킨다. 전자정부 모바일 표준프레임워크는 기본적으로 수직으로 배열된 버튼그룹을 생성한다.

data-type="horizontal" 속성을 <div data-role="controlgroup"> 컨테이너에 추가하면 수평으로 배열된 버튼그룹을 생성할 수 있다. 수평으로 배열된 버튼그룹의 너비가 화면의 너비보다 넓은 경우 버튼그룹이 여러 줄로 보여질 수 있으므로 유의해야 한다.

크기변경

기본적으로 버튼은 block 스타일이 적용되어 자동으로 너비가 화면에 맞춰진다. 너비가 버튼내용에 맞춰진 버튼을 생성하려면 해당 버튼에 data-inline="true" 속성을 추가한다.

inline

data-inline="true" 속성을 갖는 버튼을 연속적으로 배열하면 여러 버튼을 한 줄에 위치시킬 수 있다.

inline inline

높이는 normal, small이 지원되며 small을 원할 시 기본코드에 data-mini="true" 를 추가한다.

Small

버튼 아이콘

data-icon 속성을 추가하여 버튼에 아이콘을 추가할 수 있다.

또한 data-iconpos 속성을 추가하여 아이콘이 추가될 위치 (top, bottom, left, right) 를 지정할 수 있다.

Button Icon Button Iconpos

그림자 효과

그림자는 기본적으로 생성되며, 그림자가 없는 버튼을 원할 시에는 data-shadow="false" 속성을 추가하여 그림자를 제거 할 수 있다.

Remove Button Shadow

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