(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
参考:
http://www.gajotres.net/must-have-plugins-for-ionic-framework/
Ionic页面设计组件大全(UI Design Patterns)
猜你喜欢
转载自rensanning.iteye.com/blog/2255844
今日推荐
周排行