Ionic页面设计组件大全(UI Design Patterns)

[color=blue][size=medium][b]（1）自带组件[/b]

- 选项卡Tabs
[url=http://ionicframework.com/docs/components/#tabs]http://ionicframework.com/docs/components/#tabs[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9945/b7ae96bc-7f72-38ad-a877-18314b2cda1f.png[/img]

- 列表Lists
[url=http://ionicframework.com/docs/components/#list]http://ionicframework.com/docs/components/#list[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9947/d6ca485e-3d87-353f-b189-299e94676840.png[/img]

- 卡片Cards
[url=http://ionicframework.com/docs/components/#cards]http://ionicframework.com/docs/components/#cards[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9949/01e8bf5c-e89f-32b2-ac40-80056cc39472.png[/img]

- 网格Grid
[url=http://ionicframework.com/docs/components/#grid]http://ionicframework.com/docs/components/#grid[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9951/39ca120a-1246-3fff-b3ca-2051035f12cb.png[/img]

- 侧边抽屉SideMenus
[url=http://ionicframework.com/docs/api/directive/ionSideMenus/]http://ionicframework.com/docs/api/directive/ionSideMenus/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9953/c0ecccc7-647d-349d-8fe6-83bfa1e84431.gif[/img]

- 模态窗口Modal
[url=http://ionicframework.com/docs/api/service/$ionicModal/]http://ionicframework.com/docs/api/service/$ionicModal/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9955/ec5f9cfc-6cdb-3204-9e44-9d292ad57949.gif[/img]

- 上拉菜单ActionSheet
[url=http://ionicframework.com/docs/api/service/$ionicActionSheet/]http://ionicframework.com/docs/api/service/$ionicActionSheet/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9957/82c8def2-e910-32bf-914c-a4673574390a.gif[/img]

- 加载动画Loading
[url=http://ionicframework.com/docs/api/service/$ionicLoading/]http://ionicframework.com/docs/api/service/$ionicLoading/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9959/a0d4e3c6-a280-30c1-ade1-eca25c38ed1f.png[/img]

- 弹出框Popover
[url=http://ionicframework.com/docs/api/service/$ionicPopover/]http://ionicframework.com/docs/api/service/$ionicPopover/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9961/b0311639-c7f3-3371-b5b7-f7fa13c18308.png[/img]

- 对话框Popup（Dialog）
[url=http://ionicframework.com/docs/api/service/$ionicPopup/]http://ionicframework.com/docs/api/service/$ionicPopup/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9963/6681c4b3-0e51-3b54-bc48-74b8d6f6ffb3.png[/img]

- 轮播页SlideBox(Swiper Slider)
[url=http://ionicframework.com/docs/api/directive/ionSlideBox/]http://ionicframework.com/docs/api/directive/ionSlideBox/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9965/08fc459d-2c68-36b3-9003-1725d25479f3.gif[/img]

- 下拉刷新PullToRefresh/Readmore
[url=http://ionicframework.com/docs/api/directive/ionRefresher/]http://ionicframework.com/docs/api/directive/ionRefresher/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9967/5d4a5a79-5eb3-342a-afd6-1356337e91cb.png[/img]

[b]（2）常用组件[/b]

- 展开收缩列表Accordion / Collapsible Lists
[url=http://codepen.io/shengoo/pen/bNbvdO/]http://codepen.io/shengoo/pen/bNbvdO/[/url]
[url=http://codepen.io/ManarKamel/pen/nDfIb]http://codepen.io/ManarKamel/pen/nDfIb[/url]
[url=http://codepen.io/ionic/pen/uJkCz]http://codepen.io/ionic/pen/uJkCz[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9969/eab99288-1362-30fe-8edf-8823e663ea59.png[/img]

- 首字母索引列表Indexed List
[url=http://codepen.io/Samurais/pen/JoKBRL]http://codepen.io/Samurais/pen/JoKBRL[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9971/6c6eeab8-47be-3f5f-b92d-6451dd2950a3.png[/img]

- 水平滚动列表Horizontal Scroll List/Cards
[url=http://codepen.io/calendee/pen/zaHit/]http://codepen.io/calendee/pen/zaHit/[/url]
[url=http://codepen.io/drewrygh/pen/jEJGLx]http://codepen.io/drewrygh/pen/jEJGLx[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9973/18c95078-9efb-3a5b-b000-976555f0fb48.png[/img]

- 聊天界面Chat / Messages
[url=http://codepen.io/calendee/pen/MYaZJN]http://codepen.io/calendee/pen/MYaZJN[/url]
[url=http://codepen.io/ethanneff/pen/yymYRR]http://codepen.io/ethanneff/pen/yymYRR[/url]
[url=http://codepen.io/mhartington/pen/QwLZyQ]http://codepen.io/mhartington/pen/QwLZyQ[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9975/086c5270-2723-388e-8576-fa3f9f7eb674.png[/img]

- 图像网格Gallery-Like Image Grid
[url=https://market.ionic.io/plugins/ionic-gallery]https://market.ionic.io/plugins/ionic-gallery[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9977/e6d1c1c6-0ae2-3874-87c1-1ffcb843856e.png[/img]

- 滑动选项卡Tabbed Slide Box
[url=https://github.com/saravmajestic/ionic]https://github.com/saravmajestic/ionic[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9979/31884a2a-fffe-39e8-9527-c3cc50054d34.jpg[/img]

- 手势锁屏Lock Pattern Login
patternLock.js
[url=http://ignitersworld.com/lab/patternLock.html]http://ignitersworld.com/lab/patternLock.html[/url]
[img]http://dl2.iteye.com/upload/attachment/0115/0030/355f214b-d7c2-34f4-a2f9-5b6007c7254f.gif[/img]

[url=http://devdactic.com/lock-pattern-login-ionic/]http://devdactic.com/lock-pattern-login-ionic/[/url]
[url=https://blog.nraboy.com/2014/09/add-pin-code-unlock-ionicframework-app/]https://blog.nraboy.com/2014/09/add-pin-code-unlock-ionicframework-app/[/url]
[img]http://dl2.iteye.com/upload/attachment/0113/0005/1faeabca-6766-3bcb-b741-5fbd214a0e62.png[/img]

- 引导页Wizard
[url=http://arielfaur.github.io/ionic-wizard/]http://arielfaur.github.io/ionic-wizard/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9981/64b1ad04-e2b2-3297-bd82-078f870396b7.png[/img]

- 底部上拉Pull-Up Footer
[url=http://arielfaur.github.io/ionic-pullup/]http://arielfaur.github.io/ionic-pullup/[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9983/4dae246c-c255-3758-a1c0-a44c9b8a50ba.png[/img]

- Tinder卡片Tinder cards
[url=https://github.com/driftyco/ionic-ion-tinder-cards]https://github.com/driftyco/ionic-ion-tinder-cards[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9985/35b5d41e-92d9-3211-9bd3-f42c376b1410.png[/img]

- 时间轴Timeline
[url=http://rp.js.org/angular-timeline/example/index.html]http://rp.js.org/angular-timeline/example/index.html[/url]
[url=https://market.ionic.io/plugins/lumenlabs-timeline]https://market.ionic.io/plugins/lumenlabs-timeline[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9987/b93b14e8-5a54-3dc9-a08f-57a4c8ae6ecd.jpg[/img]

- 日期时间选择器Picker（Date、Image）
[url=https://github.com/rajeshwarpatlolla/ionic-datepicker]https://github.com/rajeshwarpatlolla/ionic-datepicker[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9990/10621231-8d2a-3479-b2b9-01f5a98f2f0f.png[/img]

- 搜索过滤栏Filter Bar/Search Bar
[url=https://github.com/djett41/ionic-filter-bar]https://github.com/djett41/ionic-filter-bar[/url]
[url=http://codepen.io/bgrossi/pen/JtvsL]http://codepen.io/bgrossi/pen/JtvsL[/url]
[img]http://dl2.iteye.com/upload/attachment/0113/0007/43d3cc06-b6be-3898-9422-738248159513.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0112/9993/58d26c58-4dea-3ea7-8bda-a4dfd4113605.png[/img]

- 悬浮按钮Floating Action Button
[url=https://github.com/nobitagit/ng-material-floating-button]https://github.com/nobitagit/ng-material-floating-button[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9995/74fea6bf-a75d-39bb-bbab-bf77bce054ba.gif[/img]

- 打分Rating
[url=https://market.ionic.io/plugins/ionicratings]https://market.ionic.io/plugins/ionicratings[/url]
[url=https://github.com/fraserxu/ionic-rating]https://github.com/fraserxu/ionic-rating[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9997/c2982359-ef54-385d-be96-f716bfaa4530.png[/img]

- 显示密码Password Show/Hide
[url=http://codepen.io/felquis/pen/OPdaqK]http://codepen.io/felquis/pen/OPdaqK[/url]
[img]http://dl2.iteye.com/upload/attachment/0112/9999/520215bc-2467-3896-a44e-17ff40dbe640.png[/img]

- 隐藏选项卡Hidden Tabs
[url=http://codepen.io/rensanning/pen/Wbrbwa]http://codepen.io/rensanning/pen/Wbrbwa[/url]
[img]http://dl2.iteye.com/upload/attachment/0113/0001/3a0c4840-82c1-3e4b-a5c8-7022392689c8.png[/img]

- 滚动时隐藏Hide Bars On Scroll
[url=http://codepen.io/kaililleby/pen/HALnJ]http://codepen.io/kaililleby/pen/HALnJ[/url]
[img]http://dl2.iteye.com/upload/attachment/0113/0003/a0ea97b8-f785-32f8-a14c-eb3a22ff389c.png[/img]

[b]（3）其他[/b]

- Weather app
[url=https://github.com/driftyco/ionic-weather]https://github.com/driftyco/ionic-weather[/url]

- JSapp
[url=http://jsapp.me/]http://jsapp.me/[/url]

- Ionic Material
[url=http://ionicmaterial.com/]http://ionicmaterial.com/[/url]

- Material Design (CSS-based) - Tiles
[url=http://codepen.io/zavoloklom/pen/wtApI]http://codepen.io/zavoloklom/pen/wtApI[/url][/size][/color]

参考：
[url=http://www.gajotres.net/must-have-plugins-for-ionic-framework/]http://www.gajotres.net/must-have-plugins-for-ionic-framework/[/url]