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

roobe

（1）自带组件

- 选项卡Tabs
http://ionicframework.com/docs/components/#tabs


- 列表Lists
http://ionicframework.com/docs/components/#list


- 卡片Cards
http://ionicframework.com/docs/components/#cards


- 网格Grid
http://ionicframework.com/docs/components/#grid


- 侧边抽屉SideMenus
http://ionicframework.com/docs/api/directive/ionSideMenus/


- 模态窗口Modal
http://ionicframework.com/docs/api/service/$ionicModal/


- 上拉菜单ActionSheet
http://ionicframework.com/docs/api/service/$ionicActionSheet/


- 加载动画Loading
http://ionicframework.com/docs/api/service/$ionicLoading/


- 弹出框Popover
http://ionicframework.com/docs/api/service/$ionicPopover/


- 对话框Popup（Dialog）
http://ionicframework.com/docs/api/service/$ionicPopup/


- 轮播页SlideBox(Swiper Slider)
http://ionicframework.com/docs/api/directive/ionSlideBox/


- 下拉刷新PullToRefresh/Readmore
http://ionicframework.com/docs/api/directive/ionRefresher/


（2）常用组件

- 展开收缩列表Accordion / Collapsible Lists
http://codepen.io/shengoo/pen/bNbvdO/
http://codepen.io/ManarKamel/pen/nDfIb
http://codepen.io/ionic/pen/uJkCz


- 首字母索引列表Indexed List
http://codepen.io/Samurais/pen/JoKBRL


- 水平滚动列表Horizontal Scroll List/Cards
http://codepen.io/calendee/pen/zaHit/
http://codepen.io/drewrygh/pen/jEJGLx


- 聊天界面Chat / Messages
http://codepen.io/calendee/pen/MYaZJN
http://codepen.io/ethanneff/pen/yymYRR
http://codepen.io/mhartington/pen/QwLZyQ


- 图像网格Gallery-Like Image Grid
https://market.ionic.io/plugins/ionic-gallery


- 滑动选项卡Tabbed Slide Box
https://github.com/saravmajestic/ionic


- 手势锁屏Lock Pattern Login
patternLock.js
http://ignitersworld.com/lab/patternLock.html


http://devdactic.com/lock-pattern-login-ionic/
https://blog.nraboy.com/2014/09/add-pin-code-unlock-ionicframework-app/


- 引导页Wizard
http://arielfaur.github.io/ionic-wizard/


- 底部上拉Pull-Up Footer
http://arielfaur.github.io/ionic-pullup/


- Tinder卡片Tinder cards
https://github.com/driftyco/ionic-ion-tinder-cards


- 时间轴Timeline
http://rp.js.org/angular-timeline/example/index.html
https://market.ionic.io/plugins/lumenlabs-timeline


- 日期时间选择器Picker（Date、Image）
https://github.com/rajeshwarpatlolla/ionic-datepicker


- 搜索过滤栏Filter Bar/Search Bar
https://github.com/djett41/ionic-filter-bar
http://codepen.io/bgrossi/pen/JtvsL



- 悬浮按钮Floating Action Button
https://github.com/nobitagit/ng-material-floating-button


- 打分Rating
https://market.ionic.io/plugins/ionicratings
https://github.com/fraserxu/ionic-rating


- 显示密码Password Show/Hide
http://codepen.io/felquis/pen/OPdaqK


- 隐藏选项卡Hidden Tabs
http://codepen.io/rensanning/pen/Wbrbwa


- 滚动时隐藏Hide Bars On Scroll
http://codepen.io/kaililleby/pen/HALnJ


（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

参考：