UX Component

Home Back

Nested List

<li>Tag 내부에 새로운 리스트 Tag를 적용하면 리스트를 하나의 리스트 아이템으로 갖는 중첩된 리스트를 생성할 수 있다. 리스트를 중첩시키면 자동으로 상위 리스트의 내용이 하위 리스트 타이틀로 적용되며 하위 리스트는 상위리스트의 리스트 링크 형식으로 제공된다. 리스트는 다양한 레벨로 중첩이 가능하며 두 번째 레벨에 해당하는 리스트에는 자동으로 'b 테마'가 적용된다.

COFFEE SHOP
- COFFEE
  - Americano
  - Caffe Latte
  - Caffe Mocha
- ICECREAM
  - Vanilla
  - Yogurt
  - Strawberry
  - Fashion fruit
  - Chocolate
- WAFFLE SET
  - Original Waffle
  - Waffle + Coffee
  - Waffle + Icecream
  - Waffle + Juice
SANDWICH
- Hamburger Sandwich
- Club Sandwich
- Submarine Sandwich
- BLT Sandwich
- Montecristo Sandwich
- Ruben Sandwich
- Pitta Sandwich

<ul data-role="listview" data-inset="true">
<li>COFFEE SHOP
<ul data-role="listview" data-inset="true">
<li>COFFEE
<ul data-role="listview" data-inset="true">
<li>Americano</li>
<li>Caffe Latte</li>
<li>Caffe Mocha</li>
</ul>
</li>
<li>ICECREAM
<ul data-role="listview" data-inset="true">
<li>Vanilla</li>
<li>Yogurt</li>
<li>Strawberry</li>
<li>Fashion fruit</li>
<li>Chocolate</li>
</ul>
</li>
<li>WAFFLE SET
<ul data-role="listview" data-inset="true">
<li>Belgium Waffle</li>
<li>Waffle + Coffee</li>
<li>Waffle + Icecream</li>
<li>Waffle + Juice</li>
</ul>
</li>
</ul>
</li>
<li>SANDWICH
<ul data-role="listview">
<li>Hamburger Sandwich</li>
<li>Club Sandwich</li>
<li>Submarine Sandwich</li>
<li>BLT Sandwich</li>
<li>Montecristo Sandwich</li>
<li>Ruben Sandwich</li>
<li>Pitta Sandwich</li>
</ul>
</li>
</ul>

Nested List

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