滴滴开源基于 React 的移动端开发组件库-Pile.js

PHP是最好的 2019-02-14 17:03:18 ⋅ 974 阅读

简介

Pile.js 是滴滴开发的基于 React 的移动端开发组件库。 轻量,易用,包含 52 个交互功能,支持多语言与自定义皮肤。可以非常轻松的创建用户交互界面,让前端开发更专注于业务逻辑的实现。

安装使用

第一步:安装React(已安装过可忽略)

npm install --save react react-don

第二步:安装pile-ui

npm install pile-ui --save


第三步:引用样式和导入文件

// import css

import 'pile/dist/styles/pile.min.css';

import Pile
// 引用方式一

import Pile from 'pile'

const {Button} = Pile
// 引用方式二

import {Button} from 'pile'

// 单个组件引用方式 (推荐使用,节省无用组件调用)

import Button from 'pile/dist/components/button'

第四步:引用组件代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'; //import pile

import Pile from 'pile'

import 'pile/dist/styles/pile.min.css'

const {Button} = Pile class App extends Component {    render() {      
 return (            
       <Button>hello Pile</Button>        );    } } ReactDOM.render((  
 <App/>
), document.getElementById('container'));

各种组件预览,如下:


滴滴开源的一个移动端开发组件库



具体演示效果,可以扫描或长按下方二维码,体验:


项目地址:

Github:https://github.com/didi/pile.js

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    开源资讯」React 17 正式版发布,构建用户界面 JavaScript

    React简介 React(有时叫React.jsReactJS)是 Facebook 推出一个为数据提供渲染为 HTML 视图,用来构建用户界面开源 JavaScript React

    开源推荐】基于 Go 语言轻量级高性能日志 logit使用及测评

    logit 是一个简单易用并且是基于级别控制日志,可以应用于所有 GoLang 应用程序中。

    Element 2.14.1 发布,基于 Vue 桌面组件

    Element 2.14.1 发布了。Element 是一套为开发者、设计师和产品经理准备基于 Vue 2.0 桌面组件,提供了配套设计资源,帮助你网站快速成型。由饿了么公司前端团队开源

    WebMIS 1.0.0 beta.3 发布,全栈开发基础框架

    ,为企业提供一套完整技术解决方案,满足快速开发...

    Riot 5.3.1 发布,基于组件 UI

    Riot 5.3.1 现已发布。Riot 是一个简单而优雅基于组件 UI ,为所有现代浏览器带来了自定义组件,压缩文件大小仅有 6 KB,支持 FireFox、Chrome、Edge

    京东技术:京东风格移动Vue组件NutUI2.0来啦

    移动 Vue 组件 NutUI 自发布以来受到了广泛关注。据不完全统计,目前至少有30多个京东 web 项目正在使用 NutUI 。

    「轻阅读」移动适配必须掌握基本概念和适配方案

    随着技术发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素差异,移动开发面临着多分辨率适配问题。

    微型Java开发框架Solon 1.1发布,QPS达10万+

    简介 Solon 是一个微型Java开发框架。项目从2018年启动以来,参考过大量前人作品;历时两年,2700多次commit;内核保持0.1m身材,超高Web跑分,良好使用体验

    决战上海滩!美团or,谁是打车界"大佬"?/共享单车道路艰难:青桔单车投放当天再次被“ 收缴”/支付宝惨遭沃尔玛封杀..

    决战上海滩!美团or,谁是打车界"大佬"?;共享单车道路艰难:青桔单车投放当天再次被“ 收缴”;支付宝惨遭沃尔玛封杀!马爸爸,你怎么看?

    车和家再获B轮30亿融资加入造车梦/小程序危机!小程序受到联合挑战!/“大数据杀熟”涉欺诈......

    车和家再获B轮30亿融资加入造车梦;小程序危机!小程序受到联合挑战!;“大数据杀熟”涉欺诈,住宿、出行、购票要当心;5千万用户信息遭泄露,或将面临2万亿美刀处罚,Facebook是否还能坚挺?

    开源资讯】cppweb 1.0.2 发布,基于 C++ 开发 Web 服务器

    cppweb是一个基于C++开发 WEB 服务器,支持C/C++、Python、Java等多语言混合开发WEB应用。 cppweb同时也是一个跨平台微服务开发框架,通过两个核心组件

    开源资讯】WinSCP 5.17.8 发布,Windows 图形化 SFTP 客户

    WinSCP 是一个 Windows 环境下使用 SSH 开源图形化 SFTP 客户,同时支持 SCP 协议,它主要功能是在本地与

    VUE 开源收藏版(二):史上最全面学习资源 ,附GitHub源码地址

    最近做了一个Vue开源项目汇总,里面集合了OpenDigg 上优质Vue开源项目,方便移动开发人员便捷找到自己需要项目工具等,感兴趣可以到GitHub上给个star。

    SpringBlade v2.8.0 已经发布,SaaS 微服务开发平台

    SpringBlade微服务开发平台 采用前后分离模式,前端开源两个框架:Sword (基于 React、Ant Design)、Saber (基于 Vue、Element

    开源推荐」Nginx可视化配置工具—NginxWebUI,小白也可以玩转

    包括http协议转发, tcp协议转发, 反向代理, 负载均衡, ssl证书自动申请、续签、配置等

    精品推荐:微信小程序常见UI框架/组件

    想要开发出一套高质量小程序,运用框架,组件是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型

    Fes.js v0.4.1 版本发布,一套优秀中后台系统前端解决方案

    Fes.js 是一套优秀中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件设计思想