Button
버튼은 핵심적인 위젯으로서 여러 플러그인에서 두루 사용된다.
기본코드
Anchor 링크에 data-role="button" 속성을 추가하면 전자정부 모바일 표준프레임워크에서 제공하는 버튼의 스타일을 적용할 수 있다.
- <a href="#" data-role="button">Button</a>
색상변경
data-theme 속성 값으로 테마를 적용하여 색상을 변경한다.(총 7가지 색상 지원)
- <a href="index.html" data-role="button" data-theme="a"> data-theme="a"</a>
- <a href="index.html" data-role="button" data-theme="b"> data-theme="b"</a>
- <a href="index.html" data-role="button" data-theme="c"> data-theme="c"</a>
- <a href="index.html" data-role="button" data-theme="d"> data-theme="d"</a>
- <a href="index.html" data-role="button" data-theme="e"> data-theme="e"</a>
- <a href="index.html" data-role="button" data-theme="f"> data-theme="f"</a>
- <a href="index.html" data-role="button" data-theme="g"> data-theme="g"</a>
형태변경
기본적인 버튼의 형태는 둥근형이며 사각형을 원할 시 기본코드에 data-corners="false" 속성을 추가한다.
- <a href="#" data-role="button" data-corners="false">Rectangle</a>
버튼 그룹
여러 버튼을 하나의 그룹으로 만들려면 controlgourp 속성을 갖는 <div data-role="controlgroup"> 컨테이너에 버튼을 포함시킨다. 전자정부 모바일 표준프레임워크는 기본적으로 수직으로 배열된 버튼그룹을 생성한다.
- <div data-role="controlgroup">
- <a href="#" data-role="button">Yes</a>
- <a href="#" data-role="button">No</a>
- <a href="#" data-role="button">Maybe</a>
- </div>
data-type="horizontal" 속성을 <div data-role="controlgroup"> 컨테이너에 추가하면 수평으로 배열된 버튼그룹을 생성할 수 있다. 수평으로 배열된 버튼그룹의 너비가 화면의 너비보다 넓은 경우 버튼그룹이 여러 줄로 보여질 수 있으므로 유의해야 한다.
크기변경
기본적으로 버튼은 block 스타일이 적용되어 자동으로 너비가 화면에 맞춰진다. 너비가 버튼내용에 맞춰진 버튼을 생성하려면 해당 버튼에 data-inline="true" 속성을 추가한다.
- <a href="#" data-role="button" data-inline="true">inline</a>
data-inline="true" 속성을 갖는 버튼을 연속적으로 배열하면 여러 버튼을 한 줄에 위치시킬 수 있다.
- <a href="#" data-role="button" data-inline="true">inline</a>
- <a href="#" data-role="button" data-inline="true">inline</a>
높이는 normal, small이 지원되며 small을 원할 시 기본코드에 data-mini="true" 를 추가한다.
- <a href="#" data-role="button" data-mini="true">Small</a>
버튼 아이콘
data-icon 속성을 추가하여 버튼에 아이콘을 추가할 수 있다.
또한 data-iconpos 속성을 추가하여 아이콘이 추가될 위치 (top, bottom, left, right) 를 지정할 수 있다.
- <a href="#" data-role="button" data-icon="gear">Button Icon</a>
- <a href="#" data-role="button" data-icon="gear" data-iconpos="right">Button Iconpos</a>
그림자 효과
그림자는 기본적으로 생성되며, 그림자가 없는 버튼을 원할 시에는 data-shadow="false" 속성을 추가하여 그림자를 제거 할 수 있다.
- <a href="#" data-role="button" data-shadow="false">Remove Button Shadow</a>