媒体列表

媒体布局aui-media-list是与aui-list结合使用的一种形式,可以实现有图片,多行文字等的布局样式,结合栅格系统可以实现更多布局效果

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            图文列表
        </li>
        <li class="aui-list-item aui-list-item-arrow">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表一</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text aui-ellipsis-2">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="../../image/demo1.png">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表二</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        在下方我们加入了aui-info信息条
                    </div>
                </div>
            </div>
            <div class="aui-info" style="padding-top:0">
                <div class="aui-info-item">
                    <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span>
                    </div>
                <div class="aui-info-item">2015-07-14 10:31</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="../../image/demo1.png">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表二</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                    <div class="aui-info aui-margin-t-5" style="padding:0">
                        <div class="aui-info-item">
                            <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span>
                            </div>
                        <div class="aui-info-item">2015-07-14 10:31</div>
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">媒体项右侧显示</div>
                    <div class="aui-list-item-text">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img src="../../image/demo4.png">
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">多张图片列表一</div>
                <p>借助栅格来实现图片列表</p>
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png"/>
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">多张图片列表一</div>
                <p>借助栅格来实现图片列表</p>
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png"/>
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            通讯录样式列表
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/demo5.png" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">AUI</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        www.auicss.com
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/liulangnan.png" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    流浪男
                </div>
            </div>
        </li>
    </ul>
</div>