List 列表

List 列表是对文本或图像的连续、垂直的索引。

List - H5UIh5ui.io

通用列表

<div class="h5ui-group">
    <h5 class="h5ui-group_title">
        默认列表项
    </h5>
    <a class="h5ui-list" href="">
        <div class="h5ui-list_bd">列表标题文字</div>
        <div class="h5ui-list_ft">
            <i class="h5ui-list_ft_arrow"></i>
        </div>
    </a>
    <a class="h5ui-list" href="">
        <div class="h5ui-list_bd">列表标题文字</div>
        <div class="h5ui-list_ft">
            <i class="h5ui-list_ft_arrow"></i>
        </div>
    </a>
</div>
<!-- end [lists] -->

<!-- start [lists] -->
<div class="h5ui-group">
    <h5 class="h5ui-group_title">
        带图标列表项
    </h5>
    <a class="h5ui-list" href="">
        <div class="h5ui-list_hd"><img src="../img/mark.png" width="100%" height="100%" align="h5ui"></div>
        <div class="h5ui-list_bd">列表标题文字</div>
        <div class="h5ui-list_ft">
            <i class="h5ui-list_ft_arrow"></i>
        </div>
    </a>
    <a class="h5ui-list" href="">
        <div class="h5ui-list_hd"><img src="../img/mark.png" width="100%" height="100%" align="h5ui"></div>
        <div class="h5ui-list_bd">列表标题文字</div>
        <div class="h5ui-list_ft">
            <i class="h5ui-list_ft_arrow"></i>
        </div>
    </a>
</div>

带提醒的列表

<a class="h5ui-list" href="">
    <div class="h5ui-list_bd">列表标题文字</div>
    <div class="h5ui-list_ft">
        <span class="h5ui-badge">新</span>
        <i class="h5ui-list_ft_arrow"></i>
    </div>
</a>

<a class="h5ui-list" href="">
    <div class="h5ui-list_bd">列表标题文字</div>
    <div class="h5ui-list_ft">
        <span class="h5ui-badge">12</span>
        <i class="h5ui-list_ft_arrow"></i>
    </div>
</a>

<a class="h5ui-list" href="">
    <div class="h5ui-list_bd">列表标题文字</div>
    <div class="h5ui-list_ft">
        <span class="h5ui-badge h5ui-badge_dot"></span>
        <i class="h5ui-list_ft_arrow"></i>
    </div>
</a>

带说明的列表

<a class="h5ui-list" href="">
    <div class="h5ui-list_bd">列表标题文字</div>
    <div class="h5ui-list_ft">
        <small>已选内容</small>
        <i class="h5ui-list_ft_arrow"></i>
    </div>
</a>

<div class="h5ui-list">
    <div class="h5ui-list_bd">列表标题文字</div>
    <div class="h5ui-list_ft">
        <small>说明文字</small>
    </div>
</div>