Theming buttons

Theming

테마가 적용된 Container에 하위 태그가 하나 추가가 되면, 자동적으로 부모 container가 가지고 있는 테마를 적용 받습니다. 그래서 ‘a’ 테마가 적용된 content의 자식 개체들은 자동적으로 a 테마를 적용 받습니다.

아래 버튼들은 같은 html 마크업에 다른 테마를 적용했습니다.

<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="button" ><h4>A swatch</h4><a href="index.html" data-role="button" data-theme="a">Button</a></div>

상위태그에 테마가 적용되어 있어도 하위 태그에서 다른 테마를 적용할 수 있습니다.
프레임웍이 제공하는 테마는 a~e까지 5가지 입니다. 만약, 테마 f를 적용하였을 경우 오류가 발생하는 것이 아니라 디폴트 테마로 보여지게 됩니다.