UX Component - List

Home Back

List Divider

data-role=”list-divider” 속성을 <li> Tag에 추가하면 하나의 리스트를 카테고리별로 구분할 수 있다. 기본적으로 리스트 구분에는 'b 테마'가 적용되며 data-dividertheme 속성을 통해서 색상을 변경할 수 있다.

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Coffee</li>
<li><a href="#">Americano</a></li>
<li><a href="#">Caffee Latte</a></li>
<li><a href="#">Caffee Mocha</a></li>
<li><a href="#">Caramel Macchiato</a></li>
<li><a href="#">Affogato</a></li>
<li data-role="list-divider">Icecream</li>
<li><a href="#">vanilla</a></li>
<li><a href="#">Yogurt</a></li>
<li><a href="#">Strawberry</a></li>
<li><a href="#">Fashion fruit</a></li>
<li><a href="#">Chocolate</a></li>
</ul>

Copyright(c)2012 Ministry of Government Administration and Home Affairs.