Adding List view content using App Framework Actions

List view content is added inside the panel with unordered list item ul or ordered list item ol with class="list". With class="list", App Framework applies style to the list items.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list" style="">
                        <li><a href="#detailitem">Item 1</a></li>
                        <li><a href="#detailitem">Item 2</a></li>
                        <li><a href="#detailitem">Item 3</a></li>
                    </ul>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>
        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Inset List:

To get a list with rounded corners and inset appearnce you can add class="inset" to the list (ul or ol). It gives a nicer look and it separates the list with other items on page.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list inset" style="">
                        <li><a href="#detailitem">Item 1</a></li>
                        <li><a href="#detailitem">Item 2</a></li>
                        <li><a href="#detailitem">Item 3</a></li>
                    </ul>
                    <div>
                        <p>Additional items on the page go here</p>
                    </div>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>

        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

List Dividers:

To organize the list items, you can use class="divider" on the list items (li). This list item is style differently with light gray color and the arrow closer to the item title to show the grouping clearly.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list inset" style="">
                        <li class="divider"><a href="#">Books</a></li>
                        <li><a href="#detailitem">Classics</a></li>
                        <li><a href="#detailitem">Fictions</a></li>
                        <li class="divider"><a href="#">Videos</a></li>
                        <li><a href="#detailitem">Comdey</a></li>
                        <li><a href="#detailitem">Kids</a></li>
                    </ul>
                    <div>
                        <p>Additional items on the page go here</p>
                    </div>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>
        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

To learn more about App Framework and links to other related articles, visit Getting Started with App Framework.

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.
Categorías: