輕量的移動端React組件庫

AaronYuan 發布于2019-08-23 18:08 / 1263人閱讀

摘要：移動端組件庫重新設計了那塊組件，讓數據校驗變得更簡單。敬請期待依賴安裝下載依賴初始解決不同機型的多倍屏問題，通過設置視網膜顯示屏來達到統一的目的。方式二手動引入需要的組件加載加載

移動端React組件庫

重新設計了Form那塊組件，讓數據校驗變得更簡單。
歡迎提出更多優化建議，如有興趣參與該項目，請郵件至：saytxk@gmail.com

(-> . ->) 沒錯，我就是來騙 Star 滴。

項目地址: https://github.com/rc-mobile/rcm-mobile 演示頁面: https://rc-mobile.github.io/rcm-mobile/ 使用說明 1.創建一個項目（走模版創建，無需任何配置，尚未開源）

走模版創建的項目，無需下面配置操作，開箱即用。敬請期待...

2.依賴安裝

npm i -S rcm-mobile  # 下載依賴

3.初始HTML

解決不同機型的多倍屏問題，通過設置視網膜顯示屏來達到統一的目的。

組件尺寸大小都是基于 rem 開發，可以靈活調整以適用想要適配的視網膜顯示屏

通用做法：一倍視網膜顯示屏方案

自定義：多倍視網膜顯示屏

第一步：確定視網膜顯示屏倍數，如現在設成 2倍

第二步：初始化rem的大小，html{font-size: 32px}。即瀏覽器默認的文字大小(16px) * 視網膜顯示屏倍數

第三步：恢復body下的文字大小，body{font-size: 16px}

4.全量使用（不推薦）

組件使用實例：

import { Button } from "rcm-mobile";
import "rcm-mobile/dist/rcm-mobile.css";

ReactDOM.render(, document.body);

5.按需加載（推薦）

方式一：使用 babel-plugin-import（推薦）

配置 babel

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "rcm-mobile",
      "libraryDirectory": "lib",
      "style": true
    }, "rcm-mobile"]
  ]
}

然后只需從 rcm-mobile 引入模塊即可，無需多帶帶引入樣式。

import { Button } from "rcm-mobile";

ReactDOM.render(, document.body);

方式二：手動引入需要的組件

import Button from "rcm-mobile/lib/button";  // 加載 JS
import "rcm-mobile/lib/button/style";  // 加載 CSS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104732.html

UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0
GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0