列表样式

2018-02-24 16:09 更新

从列表样式开始,可以说是进入到了一个小高潮。任何一个app都会有列表类的布局,使用AUI基本可以满足大多数开发者的需求。AUI提供的默认布局样式有普通列表,图文列表,图片列表,类似通讯录效果,开发者可以结合栅格系统来布局出更丰富的样式。

学习这块,单凭看是没有多大效果的,建议大家多练习一下。

.aui-list-view 普通列表类的布局容器,.aui-list-view-cell列表项

.aui-content中结合.aui-card可以实现带有圆角效果的布局样式

li标签都有下划线的处理,并且默认做了15px的缩进,如果想去掉的需要自定义一下(使用了.aui-card效果除外)
.aui-list-view .aui-list-view-cell:after {left: 0;}

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表栏目一
        </li>
        ......
    </ul>
</div>
<div class="aui-content aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表栏目一
        </li>
        ......
    </ul>
</div>

可以使用.aui-arrow-right给列表项加上右侧的箭头。

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">列表栏目一</a>
        </li>
        ......
    </ul>
</div>

使用.aui-badge给列表增加右侧的角标效果,.aui-badge-*来选择使用样式,角标和右侧箭头可以共存,也可以单独使用

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">
            列表栏目一
            <span class="aui-badge aui-badge-info">12</span>
            </a>
        </li>
        ......
    </ul>
</div>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号