内容简介:重新设计了Form那块组件,让数据校验变得更简单。欢迎提出更多优化建议,如有兴趣参与该项目,请邮件至:saytxk@gmail.com走模版创建的项目,无需下面配置操作,开箱即用。敬请期待...
移动端React组件库
重新设计了Form那块组件,让数据校验变得更简单。
欢迎提出更多优化建议,如有兴趣参与该项目,请邮件至:saytxk@gmail.com
项目地址: https://github.com/rc-mobile/rcm-mobile
演示页面: https://rc-mobile.github.io/rcm-mobile/
使用说明
1.创建一个项目(走模版创建,无需任何配置,尚未开源)
走模版创建的项目,无需下面配置操作,开箱即用。敬请期待...
2.依赖安装
npm i -S rcm-mobile # 下载依赖
3.初始HTML
解决不同机型的多倍屏问题,通过设置视网膜显示屏来达到统一的目的。
组件尺寸大小都是基于 rem 开发,可以灵活调整以适用想要适配的视网膜显示屏
- 通用做法:一倍视网膜显示屏方案
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> </head> <body></body> </html>
-
自定义:多倍视网膜显示屏
- 第一步:确定视网膜显示屏倍数,如现在设成 2倍
- 第二步:初始化rem的大小,html{font-size: 32px}。即浏览器默认的文字大小(16px) * 视网膜显示屏倍数
- 第三步:恢复body下的文字大小,body{font-size: 16px}
<!DOCTYPE html> <html lang="cn" style="font-size: 32px;"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <script> (function () { var phoneScale = parseInt(window.screen.width) / 750 document.write('\<meta name="viewport" content="width=750, minimum-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=no, viewport-fit=cover">') })() </script> </head> <body style="font-size: 16px;"></body> </html>
4.全量使用(不推荐)
组件使用实例:
import { Button } from 'rcm-mobile'; import 'rcm-mobile/dist/rcm-mobile.css'; ReactDOM.render(<Button>Start</Button>, 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(<Button>Start</Button>, document.body);
- 方式二:手动引入需要的组件
import Button from 'rcm-mobile/lib/button'; // 加载 JS import 'rcm-mobile/lib/button/style'; // 加载 CSS
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS 一个轻量级的组件化思路
- Vue封装一个简单轻量的上传文件组件的示例
- Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
- 轻量级服务器套件 TheSSS 25.2 发布,组件更新
- NutUI 2.2.5 发布,移动端轻量级 Vue 组件库
- NutUI 2.2.7 发布,移动端轻量级 Vue 组件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。