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

(1)自带组件

- 选项卡Tabs
http://ionicframework.com/docs/components/#tabs
Ionic页面设计组件大全(UI Design Patterns)_第1张图片

- 列表Lists
http://ionicframework.com/docs/components/#list
Ionic页面设计组件大全(UI Design Patterns)_第2张图片

- 卡片Cards
http://ionicframework.com/docs/components/#cards
Ionic页面设计组件大全(UI Design Patterns)_第3张图片

- 网格Grid
http://ionicframework.com/docs/components/#grid
Ionic页面设计组件大全(UI Design Patterns)_第4张图片

- 侧边抽屉SideMenus
http://ionicframework.com/docs/api/directive/ionSideMenus/
Ionic页面设计组件大全(UI Design Patterns)_第5张图片

- 模态窗口Modal
http://ionicframework.com/docs/api/service/$ionicModal/
Ionic页面设计组件大全(UI Design Patterns)_第6张图片

- 上拉菜单ActionSheet
http://ionicframework.com/docs/api/service/$ionicActionSheet/
Ionic页面设计组件大全(UI Design Patterns)_第7张图片

- 加载动画Loading
http://ionicframework.com/docs/api/service/$ionicLoading/
Ionic页面设计组件大全(UI Design Patterns)_第8张图片

- 弹出框Popover
http://ionicframework.com/docs/api/service/$ionicPopover/
Ionic页面设计组件大全(UI Design Patterns)_第9张图片

- 对话框Popup(Dialog)
http://ionicframework.com/docs/api/service/$ionicPopup/
Ionic页面设计组件大全(UI Design Patterns)_第10张图片

- 轮播页SlideBox(Swiper Slider)
http://ionicframework.com/docs/api/directive/ionSlideBox/
Ionic页面设计组件大全(UI Design Patterns)_第11张图片

- 下拉刷新PullToRefresh/Readmore
http://ionicframework.com/docs/api/directive/ionRefresher/
Ionic页面设计组件大全(UI Design Patterns)_第12张图片

(2)常用组件

- 展开收缩列表Accordion / Collapsible Lists
http://codepen.io/shengoo/pen/bNbvdO/
http://codepen.io/ManarKamel/pen/nDfIb
http://codepen.io/ionic/pen/uJkCz
Ionic页面设计组件大全(UI Design Patterns)_第13张图片

- 首字母索引列表Indexed List
http://codepen.io/Samurais/pen/JoKBRL
Ionic页面设计组件大全(UI Design Patterns)_第14张图片

- 水平滚动列表Horizontal Scroll List/Cards
http://codepen.io/calendee/pen/zaHit/
http://codepen.io/drewrygh/pen/jEJGLx
Ionic页面设计组件大全(UI Design Patterns)_第15张图片

- 聊天界面Chat / Messages
http://codepen.io/calendee/pen/MYaZJN
http://codepen.io/ethanneff/pen/yymYRR
http://codepen.io/mhartington/pen/QwLZyQ
Ionic页面设计组件大全(UI Design Patterns)_第16张图片

- 图像网格Gallery-Like Image Grid
https://market.ionic.io/plugins/ionic-gallery
Ionic页面设计组件大全(UI Design Patterns)_第17张图片

- 滑动选项卡Tabbed Slide Box
https://github.com/saravmajestic/ionic
Ionic页面设计组件大全(UI Design Patterns)_第18张图片

- 手势锁屏Lock Pattern Login
http://devdactic.com/lock-pattern-login-ionic/
https://blog.nraboy.com/2014/09/add-pin-code-unlock-ionicframework-app/
Ionic页面设计组件大全(UI Design Patterns)_第19张图片

- 引导页Wizard
http://arielfaur.github.io/ionic-wizard/
Ionic页面设计组件大全(UI Design Patterns)_第20张图片

- 底部上拉Pull-Up Footer
http://arielfaur.github.io/ionic-pullup/
Ionic页面设计组件大全(UI Design Patterns)_第21张图片

- Tinder卡片Tinder cards
https://github.com/driftyco/ionic-ion-tinder-cards
Ionic页面设计组件大全(UI Design Patterns)_第22张图片

- 时间轴Timeline
http://rp.js.org/angular-timeline/example/index.html
https://market.ionic.io/plugins/lumenlabs-timeline
Ionic页面设计组件大全(UI Design Patterns)_第23张图片

- 日期时间选择器Picker(Date、Image)
https://github.com/rajeshwarpatlolla/ionic-datepicker
Ionic页面设计组件大全(UI Design Patterns)_第24张图片

- 搜索过滤栏Filter Bar/Search Bar
https://github.com/djett41/ionic-filter-bar
http://codepen.io/bgrossi/pen/JtvsL
Ionic页面设计组件大全(UI Design Patterns)_第25张图片
Ionic页面设计组件大全(UI Design Patterns)_第26张图片

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


- 打分Rating
https://market.ionic.io/plugins/ionicratings
https://github.com/fraserxu/ionic-rating
Ionic页面设计组件大全(UI Design Patterns)_第27张图片

- 显示密码Password Show/Hide
http://codepen.io/felquis/pen/OPdaqK
Ionic页面设计组件大全(UI Design Patterns)_第28张图片

- 隐藏选项卡Hidden Tabs
http://codepen.io/rensanning/pen/Wbrbwa
Ionic页面设计组件大全(UI Design Patterns)_第29张图片

- 滚动时隐藏Hide Bars On Scroll
http://codepen.io/kaililleby/pen/HALnJ
Ionic页面设计组件大全(UI Design Patterns)_第30张图片

(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


参考:
http://www.gajotres.net/must-have-plugins-for-ionic-framework/

你可能感兴趣的:(Ionic页面设计组件大全(UI Design Patterns))