移動端定製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 的實現。

• 後續會更新更多的開發實踐開源代碼庫。同時更新導讀文章，也歡迎你們提問和建議。

• 以爲有點啓發的望多多轉發。隨手贊一個也不錯....