Category: List Views

Numbered lists will be created when using an ordered list <ol> (see Figure 5–8 and its related code in Listing 5–7). Figure 5–8. List with numbers By default the framework will add the numerical index to the left of each list item. These lists are useful when showing a listing of items that can be ranked sequentially. For instance, our “top…

In situations where you need to support multiple actions per list item, we can create a split button list that has a primary and secondary button to choose from. For instance, we can modify our original movie listing example to support multiple actions. Our primary button will continue to show movie details and our new…

We can add thumbnails to the left of our list item by adding an image inside a list item as the first child element (see Figure 5–5 and its related code in Listing 5–4). The framework will scale the image to 80 pixels square. Figure 5–5. List with thumbnails We can also use smaller icons instead of thumbnails. To…

A list divider can be used as a heading for a group of list items. For instance, if our app has a calendar listing, we may choose to group our calendar events by day (see Figure 5–4). List dividers can also be used as headers for inset lists. In our prior example, we also set the…

An inset list will not appear edge-to-edge. Instead, an inset list is automatically wrapped inside a block with rounded corners and has margins set for additional spacing. To create an inset list, add the data-inset=”true” attribute to the list element (see Figure 5–2 and 5–3, and the related code in Listing 5–2). Figure 5–2. Inset list (iOS) Figure 5–3. Inset list (Windows Phone…