列表布局

aui-list为简单的列表布局容器,结合aui-meida-list、aui-form-list、aui-select-list

可以实现媒体列表布局,表单及选择器列表。

下面用图片结构的形式来介绍布局列表的使用

 

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            简单的列表布局
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item1</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item2</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item3</div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            带有右侧箭头
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item1</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item2</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item3</div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            带有其他元素的列表
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">text</div>
                <div class="aui-list-item-right">信息</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">label</div>
                <div class="aui-list-item-right">
                    <div class="aui-label aui-label-info">标签</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">dot</div>
                <div class="aui-list-item-right">
                    <div class="aui-dot" style="position:relative;top:0; right:0"></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">badge</div>
                <div class="aui-list-item-right">
                    <div class="aui-badge" style="position:relative;top:0; left:0">88</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">badge</div>
                <div class="aui-list-item-right">
                    <div class="aui-badge" style="position:relative;top:0; left:0"></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">progress</div>
                <div class="aui-list-item-right">
                    <div class="aui-progress aui-progress aui-progress-xxs" style="width:5rem;">
                        <div class="aui-progress-bar" style="width: 60%;"></div>
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">range</div>
                <div class="aui-list-item-right">
                    <div class="aui-range">
                        <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">switch</div>
                <div class="aui-list-item-right">
                    <input type="checkbox" class="aui-switch" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">radio</div>
                <div class="aui-list-item-right">
                    <input type="radio" class="aui-radio" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">checkbox</div>
                <div class="aui-list-item-right">
                    <input type="checkbox" class="aui-checkbox" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">bar-btn</div>
                <div class="aui-list-item-right">
                    <div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:60%;float:right">
                        <div class="aui-bar-btn-item">
                            <i class="aui-iconfont aui-icon-minus"></i>
                        </div>
                        <div class="aui-bar-btn-item">
                            <input type="number" class="aui-input aui-text-center" value="1" >
                        </div>
                        <div class="aui-bar-btn-item">
                            <i class="aui-iconfont aui-icon-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">带有图标、底线缩进</li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-home"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-edit"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-camera"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
    </ul>
</div>