列表 List

使用 .aui-lists 来使用列表效果。使用 .aui-list-* 来选择使用AUI提供的样式，详见示例。

示例代码

<div class="aui-content">
    <div class="content-top">
        List组件可以在其中使用icon图标、img缩略图或放置你想放的元素，使用场景如：导航菜单、列表、设置中心排版等。
    </div>
    <div class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            基础用法
        </div>
        <div class="aui-card-main" style="padding: 0;">
            <ul class="aui-lists">
                <li class="aui-list">
                    <div class="aui-list-left">列表文字</div>
                </li>
                <li class="aui-list">
                    <div class="aui-list-left">列表文字</div>
                    <div class="aui-list-left-desc">描述文字</div>
                </li>
                <li class="aui-list aui-list-disabled">
                    <div class="aui-list-left">列表文字</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            菜单列表
        </div>
        <div class="aui-card-main" style="padding: 0;">
            <ul class="aui-lists">
                <li class="aui-list">
                    <div class="aui-list-left">列表右侧带箭头</div>
                    <div class="aui-list-right">
                        <i class="iconfont aui-btn-right iconright1"></i>
                    </div>
                </li>
                <li class="aui-list">
                    <div class="aui-list-left">
                        <img src="../../../static/img/index-2.png" alt="">
                        列表左侧带缩略图
                    </div>
                    <div class="aui-list-right">
                        <i class="iconfont aui-btn-right iconright1"></i>
                    </div>
                </li>
                <li class="aui-list">
                    <div class="aui-list-left">
                        <i class="iconfont aui-btn-right iconzhedie" style="color: #05c091; font-size: 20px;"></i>
                        列表左侧带icon图标
                    </div>
                    <div class="aui-list-right">
                        <i class="iconfont aui-btn-right iconright1"></i>
                    </div>
                </li>
                <li class="aui-list">
                    <div class="aui-list-left">列表右侧带角标</div>
                    <div class="aui-list-right">
                        <span class="aui-badge aui-badge-small">1</span>
                        <i class="iconfont aui-btn-right iconright1"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>