NeoUI使用情况全记录

[宋杨阳]

NeoUI使用情况全记录

NeoUI是一个基于 UI 设计语言 iuap design 实现的前端框架，它包括了CSS样式，能实现相对功能的组件以及javascript插件，所见既所得，能使我们更快速的构建前端页面。更详细的信息可参考http://design.yyuap.com/dist/pages/neoui/index.html。以下文字记录的则是自己第一次用NeoUI（3.0.6版）时的一些情况。

NeoUI使用详情

1、响应式布局

首先是响应式布局非常好用并且很简单，官网上的例子一看就明白，值得注意的几点是：

• 最外部的容器要加上u-container-fluid这个类名、每一行的容器要加上u-row，每一行中的列分配1-12的空间，加上类名u-col-*。
• 具有u-container-fluid这个类名的容器下面可以有多个行，也就是说可以有多个u-row，但最好用的不是这个，而是在每一个列（column）也就是加有"u-col-*"的类里面还可以加u-row，u-row下面还可以有多个列，依次类推，功能比较强大。
• 在浏览器屏幕比较小的时候u-col-* 用着就不太灵了，要加上 u-col-sm-* 和u-col-xs-*，可以在大于等于768px和小于768px的屏幕下自适应。
• 每个column中会有左右各15px的padding值，对样式要求特别严格的时候需要注意一下。
• u-col-* 和u-col-md-*是一样的，这个反应了好长时间才反应过来。

  2、水平垂直居中问题

  水平居中问题很简单，用margin和NeoUI中的center-block，都很容易实现。垂直居中用NeoUI中的vertical-align和vertical-align-middle也很容易实现（注意：必须同事父类用vertical-align同时设定高度,子类用vertical-align-middle。），但同时在我在使用的过程中也遇到了一些问题：
• 这个不知道是不是个问题，是我在使用的过程中子类没有加vertical-align-middle，子类会跑到父类的下面，而且子类中的文字也没了，在vertical-align这个类中有“font-size：0；”，去掉之后就有文字了，不知道这是不是个bug，权且记录一下吧。
• 本来以为垂直水平问题用NeoUI很容易实现，但是当我写了如下的代码后却实现不了，不知道是我写的代码有问题，还是NeoUI的问题，代码如下：

    <div class="h vertical-align " style="border: 1px solid red">
        <div class="h-64 w-64 bg-blue center-block vertical-align-middle">
        我是内容
        </div>
    </div>

以上代码执行的结果是：子类跑到了父类的正下方，不能实现水平垂直居中。

3、媒体对象

还使用了一个NeoUI的组件叫媒体对象，很常用。用的时候只需修改对应的内容，但是在实际的过程中，我将4个媒体对象排成一排，第一个对象会偏上一点，经检查，原因是由于在u.css中有这样一个类：

    .u-media:first-child{
        margin-top: 5px;
    }

结果将margin-top值改为15px显示正常。

问题与建议

从个人第一次使用NeoUI的感受来看，NeoUI在很多方面为页面的快速构建提供了便利，但是使用过程中也存在着一些待改进和优化的地方

• 导航条的示例中中有标签错误（span写成spa）和重复id情况（id="toggleMenubar"），应当改正。
• 另外导航条例子太长而且层级太多，感觉用户体验不好，个人建议例子可以尽量简洁一些，放一两个小组件即可，另外再提供一个可以往导航条中的放的小组件库，供用户选择。
• 符号库中符号使用时经常需要改变颜色和大小，能否具体的提供一下改变颜色和大小的方法，另外符号库中的符号较多，寻找时较困难，可否按功能或其他什么标准分一下类，达到更好的用户体验。