我记录

ionic 脚手架和主题

掷鸡蛋者 发布于 2015/5/25 14:19 浏览: 3734 回复: 0 所在分类:ionic

通过命令

$ ionic start myapp [template]

可以快速创建一个 ionic 原型 app


一、默认模板

其中的模板,ionic 默认自带了三个模板

  1. tabs(即default)

  2. sidemenu

  3. blank

你也可以使用其他 github 网址,比如第一个 tabs,其实等效于 https://github.com/driftyco/ionic-starter-tabs 

也就是说,当使用如下命令时:

$ ionic start myapp tabs

模板名称,其实和 github 中的 url 是一致的

https://github.com/driftyco/ionic-starter-tabs

上面蓝色部分是相同的。


二、其他模板

除了 ionic 官方自带的三个模板,还有大量其他第三方模板,比如这里:

http://codepen.io/ionic/public-list/ 

包括message 对话列表、微博 card 列表、弹窗返回、pull refresh 等等。

所以我们可以通过url 安装:

$ ionic start mysns  http://codepen.io/ionic/pen/hIzFp


侧边栏1:http://codepen.io/ionic/pen/QwamEW 

侧边栏2:http://codepen.io/ionic/pen/cDbFg 


下拉刷新:http://codepen.io/ionic/pen/mqolp 

列表管理(排序、滑动删除等):http://codepen.io/ionic/pen/JsHjf

展开&收缩效果(Accordion):http://codepen.io/ionic/pen/uJkCz 

缩略图列表:http://codepen.io/ionic/pen/isfAJ 

聊天窗口:http://codepen.io/ionic/pen/rxysG 

sns 卡片式新鲜事模板是: http://codepen.io/ionic/pen/hIzFp 


弹窗确认:http://codepen.io/ionic/pen/zkmhJ 

Popover:http://codepen.io/ionic/pen/GpCst 

模态窗口:http://codepen.io/ionic/pen/gblny

底部确认框:http://codepen.io/ionic/pen/jLylA 


登录界面:http://codepen.io/ionic/pen/CbBsA 

引导步骤:http://codepen.io/ionic/pen/AjgEB 

tab页内导航:http://codepen.io/ionic/pen/odqCz 


搜索示例1:http://codepen.io/ionic/pen/CrInw 

搜索教程:https://docs.angularjs.org/tutorial/step_03 


图片卡片:http://codepen.io/ionic/pen/nxEdH 

图片卡片2:http://codepen.io/ionic/pen/skbxh 

loading图标:http://codepen.io/ionic/pen/GgwVON 

隐藏顶部导航栏:http://codepen.io/ionic/pen/hIzFp  


教程:

官网教程:http://learn.ionicframework.com/formulas/working-with-sass/ 

自定义教程:https://github.com/chanusukarno/Ionic-Theming 

还有系列:http://worldofinfo.cf/y243/ionic-framework-themes 

工具:

在线可视化修改主题:http://ionic-theme-editor.herokuapp.com/ 

http://forum.ionicframework.com/t/demo-ionic-theme-editor-build-a-custom-theme-visually/11967


主题:

Ionic Material: http://ionicmaterial.com/  

源码在:https://github.com/zachsoft/Ionic-Material 

其他:http://codecanyon.net/item/ionfullapp-ionic-phonegapcordova-full-hybrid-app/10400343?ref=recommended_for_you

更多模板:http://codecanyon.net/category/mobile/native-web/full-applications 

另外http://99designs.com/mobile-app-design 

自定义样式:https://gist.github.com/mhartington/a4b756d235dd5f988c80


掷鸡蛋者2015/5/25 14:19

留下脚印

踩一脚
copyright © 用微博记录这个时代 2010-2014
Powered by 我记录2.0
Processed in 0 seconds, 0 queries