JQuery Mobile - inline buttons

Inline buttons

디폴트로 body 내에 있는 모든 버튼들은 block-level element 로 스타일 돼 있습니다. 그래서 전체 화면 width를 꽉 채우게 되죠.

그런데 버튼 안의 텍스트 만큼만 버튼 크기를 만들고 싶을 때가 있습니다. 그럴 경우 버튼에 data-inline="true" attribute를 추가해 주시면 해결하실 수 있습니다.

좌우로 이어지는 여러개의 버튼이 있으면 data-inline="true" attribute를 각각의 버튼에 모두 추가하세요. 그렇게 하면 버튼크기는 버튼 안의 텍스트 크기만큼 정해 질겁니다. 그리고 버튼들이 같은 줄에서 좌우로 정렬 될 겁니다.

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

결과는 아래와 같습니다.

inline 버튼에 data-mini="true" 를 추가하면 좀 더 compact 한 버전의 버튼이 생성됩니다.


만약 버튼이 한줄에 나란히 표시 되면서도 width를 screen 크기만큼 차지하도록 하고 싶다면 content column grids를 사용해서 화면의 컬럼을 2개 또는 3개 만드신 후 일반적인 full-width 버튼을 사용하시면 됩니다.

Icon example

inline 버튼에 icon이 추가되면 그 버튼은 그 아이콘 크기만큼 사이즈가 조금 더 커질 겁니다.

mini 버전도 같습니다.

inlineButtons.html