Ionic页面设计组件大全(UI Design Patterns)
（1）自带组件- 选项卡Tabs
http://ionicframework.com/docs/components/#tabs
http://dl2.iteye.com/upload/attachment/0112/9945/b7ae96bc-7f72-38ad-a877-18314b2cda1f.png
- 列表Lists
http://ionicframework.com/docs/components/#list
http://dl2.iteye.com/upload/attachment/0112/9947/d6ca485e-3d87-353f-b189-299e94676840.png
- 卡片Cards
http://ionicframework.com/docs/components/#cards
http://dl2.iteye.com/upload/attachment/0112/9949/01e8bf5c-e89f-32b2-ac40-80056cc39472.png
- 网格Grid
http://ionicframework.com/docs/components/#grid
http://dl2.iteye.com/upload/attachment/0112/9951/39ca120a-1246-3fff-b3ca-2051035f12cb.png
- 侧边抽屉SideMenus
http://ionicframework.com/docs/api/directive/ionSideMenus/
http://dl2.iteye.com/upload/attachment/0112/9953/c0ecccc7-647d-349d-8fe6-83bfa1e84431.gif
- 模态窗口Modal
http://ionicframework.com/docs/api/service/$ionicModal/
http://dl2.iteye.com/upload/attachment/0112/9955/ec5f9cfc-6cdb-3204-9e44-9d292ad57949.gif
- 上拉菜单ActionSheet
http://ionicframework.com/docs/api/service/$ionicActionSheet/
http://dl2.iteye.com/upload/attachment/0112/9957/82c8def2-e910-32bf-914c-a4673574390a.gif
- 加载动画Loading
http://ionicframework.com/docs/api/service/$ionicLoading/
http://dl2.iteye.com/upload/attachment/0112/9959/a0d4e3c6-a280-30c1-ade1-eca25c38ed1f.png
- 弹出框Popover
http://ionicframework.com/docs/api/service/$ionicPopover/
http://dl2.iteye.com/upload/attachment/0112/9961/b0311639-c7f3-3371-b5b7-f7fa13c18308.png
- 对话框Popup（Dialog）
http://ionicframework.com/docs/api/service/$ionicPopup/
http://dl2.iteye.com/upload/attachment/0112/9963/6681c4b3-0e51-3b54-bc48-74b8d6f6ffb3.png
- 轮播页SlideBox(Swiper Slider)
http://ionicframework.com/docs/api/directive/ionSlideBox/
http://dl2.iteye.com/upload/attachment/0112/9965/08fc459d-2c68-36b3-9003-1725d25479f3.gif
- 下拉刷新PullToRefresh/Readmore
http://ionicframework.com/docs/api/directive/ionRefresher/
http://dl2.iteye.com/upload/attachment/0112/9967/5d4a5a79-5eb3-342a-afd6-1356337e91cb.png
（2）常用组件
- 展开收缩列表Accordion / Collapsible Lists
http://codepen.io/shengoo/pen/bNbvdO/
http://codepen.io/ManarKamel/pen/nDfIb
http://codepen.io/ionic/pen/uJkCz
http://dl2.iteye.com/upload/attachment/0112/9969/eab99288-1362-30fe-8edf-8823e663ea59.png
- 首字母索引列表Indexed List
http://codepen.io/Samurais/pen/JoKBRL
http://dl2.iteye.com/upload/attachment/0112/9971/6c6eeab8-47be-3f5f-b92d-6451dd2950a3.png
- 水平滚动列表Horizontal Scroll List/Cards
http://codepen.io/calendee/pen/zaHit/
http://codepen.io/drewrygh/pen/jEJGLx
http://dl2.iteye.com/upload/attachment/0112/9973/18c95078-9efb-3a5b-b000-976555f0fb48.png
- 聊天界面Chat / Messages
http://codepen.io/calendee/pen/MYaZJN
http://codepen.io/ethanneff/pen/yymYRR
http://codepen.io/mhartington/pen/QwLZyQ
http://dl2.iteye.com/upload/attachment/0112/9975/086c5270-2723-388e-8576-fa3f9f7eb674.png
- 图像网格Gallery-Like Image Grid
https://market.ionic.io/plugins/ionic-gallery
http://dl2.iteye.com/upload/attachment/0112/9977/e6d1c1c6-0ae2-3874-87c1-1ffcb843856e.png
- 滑动选项卡Tabbed Slide Box
https://github.com/saravmajestic/ionic
http://dl2.iteye.com/upload/attachment/0112/9979/31884a2a-fffe-39e8-9527-c3cc50054d34.jpg
- 手势锁屏Lock Pattern Login
patternLock.js
http://ignitersworld.com/lab/patternLock.html
http://dl2.iteye.com/upload/attachment/0115/0030/355f214b-d7c2-34f4-a2f9-5b6007c7254f.gif
http://devdactic.com/lock-pattern-login-ionic/
https://blog.nraboy.com/2014/09/add-pin-code-unlock-ionicframework-app/
http://dl2.iteye.com/upload/attachment/0113/0005/1faeabca-6766-3bcb-b741-5fbd214a0e62.png
- 引导页Wizard
http://arielfaur.github.io/ionic-wizard/
http://dl2.iteye.com/upload/attachment/0112/9981/64b1ad04-e2b2-3297-bd82-078f870396b7.png
- 底部上拉Pull-Up Footer
http://arielfaur.github.io/ionic-pullup/
http://dl2.iteye.com/upload/attachment/0112/9983/4dae246c-c255-3758-a1c0-a44c9b8a50ba.png
- Tinder卡片Tinder cards
https://github.com/driftyco/ionic-ion-tinder-cards
http://dl2.iteye.com/upload/attachment/0112/9985/35b5d41e-92d9-3211-9bd3-f42c376b1410.png
- 时间轴Timeline
http://rp.js.org/angular-timeline/example/index.html
https://market.ionic.io/plugins/lumenlabs-timeline
http://dl2.iteye.com/upload/attachment/0112/9987/b93b14e8-5a54-3dc9-a08f-57a4c8ae6ecd.jpg
- 日期时间选择器Picker（Date、Image）
https://github.com/rajeshwarpatlolla/ionic-datepicker
http://dl2.iteye.com/upload/attachment/0112/9990/10621231-8d2a-3479-b2b9-01f5a98f2f0f.png
- 搜索过滤栏Filter Bar/Search Bar
https://github.com/djett41/ionic-filter-bar
http://codepen.io/bgrossi/pen/JtvsL
http://dl2.iteye.com/upload/attachment/0113/0007/43d3cc06-b6be-3898-9422-738248159513.png
http://dl2.iteye.com/upload/attachment/0112/9993/58d26c58-4dea-3ea7-8bda-a4dfd4113605.png
- 悬浮按钮Floating Action Button
https://github.com/nobitagit/ng-material-floating-button
http://dl2.iteye.com/upload/attachment/0112/9995/74fea6bf-a75d-39bb-bbab-bf77bce054ba.gif
- 打分Rating
https://market.ionic.io/plugins/ionicratings
https://github.com/fraserxu/ionic-rating
http://dl2.iteye.com/upload/attachment/0112/9997/c2982359-ef54-385d-be96-f716bfaa4530.png
- 显示密码Password Show/Hide
http://codepen.io/felquis/pen/OPdaqK
http://dl2.iteye.com/upload/attachment/0112/9999/520215bc-2467-3896-a44e-17ff40dbe640.png
- 隐藏选项卡Hidden Tabs
http://codepen.io/rensanning/pen/Wbrbwa
http://dl2.iteye.com/upload/attachment/0113/0001/3a0c4840-82c1-3e4b-a5c8-7022392689c8.png
- 滚动时隐藏Hide Bars On Scroll
http://codepen.io/kaililleby/pen/HALnJ
http://dl2.iteye.com/upload/attachment/0113/0003/a0ea97b8-f785-32f8-a14c-eb3a22ff389c.png
（3）其他
- Weather app
https://github.com/driftyco/ionic-weather
- JSapp
http://jsapp.me/
- Ionic Material
http://ionicmaterial.com/
- Material Design (CSS-based) - Tiles
http://codepen.io/zavoloklom/pen/wtApI
参考：
页:
[1]