移动端定制UI组件库

personal-ui

ui components for personal projects

使用场景

• UI组件（eg:bootstrap）在PC端还是非常高效的，特别是针对ie系开发。其次PC端网速较快，不太关心组件的文件大小和性能，更多的是开发效率和更好的兼容性。

• 移动端很难出现统一的UI组件。首先移动端非常关注性能和速度。其次每个公司的UI设计风格差别较大，很难统一。甚至许多公司内不同项目间的UI都没法统一设计规范。
  然后是移动端风格一般比较简洁，所以更适合参考好的UI组件库自己定制一套公司内部的UI组件库。

• 本项目的想法就是提供一种定制UI组件库的思路。具体的实现细节，应该根据自己公司或者项目的设计规范去实现。

具体demo实现

• input.less

//换算 1rem==100px
@input-color: #999;
@input-bgColor: #fff;

//size
@input-height: 0.6rem;
@input-fSize: 0.32rem;
@input-radius: 0.06rem;

/**
* bgColor:
* color:
*
*/
.input(@color:@input-color;@bgColor:@input-bgColor;) {
  //basic style
  width: 100%;
  position: relative;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
  .iconfont {
    display: inline-block;
    position: absolute;
    height: 100%;
    text-align: center;
    top: 0;
    &.right {
      right: 0;
    }
  }
  //dynamic style
  color: @color;
  background-color: @bgColor;
  //size
  .input-size();
}

/**
* size函数主要
* height:
* font-size:
* radius:
*
*/
@input-height-l: 0.8rem;
@input-fSize-l: 0.34rem;
@input-radius-l: 0.08rem;
//small
@input-height-s: 0.48rem;
@input-fSize-s: 0.3rem;
@input-radius-s: 0.06rem;
.input-size(@height:@input-height;@fSize:@input-fSize;@radius:@input-radius;) {
  height: @height;
  line-height: @height;
  border-radius: @radius;
  input {
    padding-left: @height;
  }
  .iconfont {
    width: @height;
  }
}
//exports your module
.personal-input(){
  .input();
  &.input-l{
    .input-size(@input-height-l;@input-fSize-l;@input-radius-l;)
  }
  &.input-s{
    .input-size(@input-height-s;@input-fSize-s;@input-radius-s;)
  }
}

项目引用

• common.less（项目自有的公共样式）

@import "../../less/common";//公共common样式
@import "../../less/core/mixins/mixins";//UI组件库函数

body {
  background-color: #EAEAEA;
}

.personal-header {
  .personal-header();
}

.personal-list {
  .personal-list();
  margin-bottom: 0.2rem;
}

.personal-ellipsis {
  .personal-ellipsis();
}

.personal-ellipsis3 {
  .personal-ellipsis(3);
}

.personal-input {
  .personal-input();
}

.personal-button {
  .personal-button();
}

.personal-checkbox {
  .personal-checkbox();
}

.personal-textarea {
  .personal-textarea();
}

.personal-switch {
  .personal-switch();
}

更多详情

• 可以参考 persona-ui 的实现。

• 后续会更新更多的开发实践开源代码库。同时更新导读文章，也欢迎大家提问和建议。

• 觉得有点启发的望多多转发。随手赞一个也不错....