【组件篇】ionic3开源组件

落日映苍穹つ 2022-05-18 10:53 252阅读 0赞

原文出处：[https://blog.csdn.net/df981011512/article/details/79473405][https_blog.csdn.net_df981011512_article_details_79473405]  
來源：简书[https://www.jianshu.com/p/3e156999eaa4][https_www.jianshu.com_p_3e156999eaa4]

平时会留意一些开源组件，收藏到收藏夹里，然后一天mac电脑因为卸载window出问题导致不能不重装，然后里面的东西都没了，特别是适用于ionic2布局的angular2和普通js……so sad，现整理回一些并分享下：

> 这里是组件篇，所以关于开源项目和插件的分别放在其它章，因为图片多会影响本文速度和美观，所以只放部分图。

> 提醒一点，ionic3除了很方便使用ionic2及以上组件外，也很方便引入angular2或普通js的组件。这里列的基本都是ionic2，如果没有，可以自行找angular2或js的。

# 组件库，可能和下面的有重复 #

*  [awesome-ionic2-components][]
 *  [ionic3-components][]

# 日历 #

*  [ion2-calendar][]
 *  [Ionic2-Calendar][]
 *  [ionic2-date-picker][]
 *  [ionic2-datepicker][]
 *  [easy-ionic2-calendar][]

# 滑动选项卡 #

*  [ionic2-super-tabs][]
 *  [Ionic2-ScrollableTabs][]
 *  [ionic3-swipetabs-segment][]![Ionic2-ScrollableTabs][Ionic2-ScrollableTabs 1]
    
    Ionic2-ScrollableTabs

# 评分 #

*  [ionic2-rating][]

![评分][preview.gif]

评分

# 视频播放 #

*  [videogular2][]

# 图表 #

*  [ng2-charts][]

# 强制更新 #

*  [ionic-manup][]

# 图像浏览 #

*  [ionic-img-viewer][]
 *  [ionic-gallery-modal][]
 *  [ImagePicker][]
 *  [PhotosView][]

![ImagePicker][ImagePicker 1]

ImagePicker

# 图像加载 #

*  [https://github.com/zyra/ionic-image-loader][https_github.com_zyra_ionic-image-loader]

# 手风琴收缩 #

*  [ionic2Accordion][]

![ionic2Accordion][ionic2Accordion 1]

ionic2Accordion

# 聊天 #

*  [ionic3-chat][]
 *  [ionic3chat][]
 *  ![457][]
 *  聊天

# 表情输入 #

*  [ionic3-emoji-picker][]

# 多级联动 #

*  [ionic2-city-picker][]
 *  [ion-multi-picker][]
 *  [iosselect][]

![ionic2-city-picker][ionic2-city-picker 1]

ionic2-city-picker

![ion-multi-picker][ion-multi-picker 1]

ion-multi-picker

# 键盘输入 #

*  [ionic2-pincode-input][]——密码键盘
 *  [ion-digit-keyboard-v2][]——数字键盘![ionic2-pincode-input][ionic2-pincode-input 1]
    
    ionic2-pincode-input

# 自动完成 #

*  [ionic2-autocomplete][]![ionic2-autocomplete][ionic2-autocomplete 1]
    
    ionic2-autocomplete

# 锚点滚动列表 #

*  [ionic2-alpha-scroll][]
 *  [ionic2-indexed-scroll][]
 *  [ionic3-index-list][]——群里有人发就补充上来了

![ionic2-indexed-scroll][ionic2-indexed-scroll 1]

ionic2-indexed-scroll

# 透明状态栏 #

*  [ionic2-transparent-bar][]

# 多层菜单 #

*  [Ionic3-MultiLevelSideMenu][]

# 滚动收缩 #

*  [Ionic2-FullscreenContent][]
 *  [ionic-shrinkage][]
 *  [ionic2-fixedscroll-directive][]

![ionic2-fixedscroll-directive][ionic2-fixedscroll-directive 1]

ionic2-fixedscroll-directive

# 圆形菜单 #

*  [Ionic2-CircularTabs][]![圆形菜单][tabsBottom2Page.gif]
    
    圆形菜单

# 圆形文本 #

*  [ionic2-circle-text-avatar][]
 *  [text-avatar][]![ionic2-circle-text-avatar][ionic2-circle-text-avatar 1]
    
    ionic2-circle-text-avatar

# tag输入 #

*  [ionic-tags-input][]![tag输入][tag]
    
    tag输入

[https_blog.csdn.net_df981011512_article_details_79473405]: https://blog.csdn.net/df981011512/article/details/79473405
[https_www.jianshu.com_p_3e156999eaa4]: https://www.jianshu.com/p/3e156999eaa4
[awesome-ionic2-components]: https://link.jianshu.com/?t=https://github.com/fishme/awesome-ionic2-components
[ionic3-components]: https://link.jianshu.com/?t=https://github.com/yannbf/ionic3-components
[ion2-calendar]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ion2-calendar
[Ionic2-Calendar]: https://link.jianshu.com/?t=https://github.com/twinssbc/Ionic2-Calendar
[ionic2-date-picker]: https://link.jianshu.com/?t=https://github.com/shangyilim/ionic2-date-picker
[ionic2-datepicker]: https://link.jianshu.com/?t=https://github.com/rajeshwarpatlolla/ionic2-datepicker
[easy-ionic2-calendar]: https://link.jianshu.com/?t=https://github.com/alexandretok/easy-ionic2-calendar
[ionic2-super-tabs]: https://link.jianshu.com/?t=https://github.com/zyra/ionic2-super-tabs
[Ionic2-ScrollableTabs]: /images/20220518/f1c4190e3f0f4e1fae2793230a718259.png
[ionic3-swipetabs-segment]: https://link.jianshu.com/?t=https://github.com/Alex-0407/ionic3-swipetabs-segment
[Ionic2-ScrollableTabs 1]: https://github.com/SinoThomas/Ionic2-ScrollableTabs/raw/master/resources/Gifs/Ionic2-ScrollableTabsv1.0_demo.gif
[ionic2-rating]: https://link.jianshu.com/?t=https://github.com/andrucz/ionic2-rating
[preview.gif]: https://github.com/andrucz/ionic2-rating/raw/master/preview.gif
[videogular2]: https://link.jianshu.com/?t=https://github.com/videogular/videogular2
[ng2-charts]: https://link.jianshu.com/?t=https://github.com/valor-software/ng2-charts
[ionic-manup]: https://link.jianshu.com/?t=https://github.com/NextFaze/ionic-manup
[ionic-img-viewer]: https://link.jianshu.com/?t=https://github.com/Riron/ionic-img-viewer
[ionic-gallery-modal]: https://link.jianshu.com/?t=https://github.com/nikini/ionic-gallery-modal
[ImagePicker]: https://link.jianshu.com/?t=https://github.com/schubertq/ImagePicker
[PhotosView]: https://link.jianshu.com/?t=https://github.com/schubertq/PhotosView
[ImagePicker 1]: https://github.com/schubertq/ImagePicker/raw/master/ImagePicker/screenshots/2.PNG
[https_github.com_zyra_ionic-image-loader]: https://link.jianshu.com/?t=https://github.com/zyra/ionic-image-loader
[ionic2Accordion]: https://link.jianshu.com/?t=https://github.com/mahmoudissmail/ionic2Accordion
[ionic2Accordion 1]: /images/20220518/dabee7bde7f14d75afbe438134652aa2.png
[ionic3-chat]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ionic3-chat
[ionic3chat]: https://link.jianshu.com/?t=https://github.com/rajayogan/ionic3chat
[457]: /images/20220518/d28b94dd03f846248e38b4e5fa01d66f.png
[ionic3-emoji-picker]: https://link.jianshu.com/?t=https://github.com/danielehrhardt/ionic3-emoji-picker
[ionic2-city-picker]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ionic2-city-picker
[ion-multi-picker]: https://link.jianshu.com/?t=https://github.com/raychenfj/ion-multi-picker
[iosselect]: https://link.jianshu.com/?t=https://github.com/zhoushengmufc/iosselect
[ionic2-city-picker 1]: /images/20220518/9b03c644a9b1480ab8e7a3c6655ebdf7.png
[ion-multi-picker 1]: https://github.com/raychenfj/ion-multi-picker/raw/master/img/dependent.gif?raw=true
[ionic2-pincode-input]: /images/20220518/440fc740be0647adab358b8ed371f11c.png
[ion-digit-keyboard-v2]: https://link.jianshu.com/?t=https://github.com/skol-pro/ion-digit-keyboard-v2
[ionic2-pincode-input 1]: https://github.com/HsuanXyz/hsuanxyz.github.io/raw/master/assets/ionic2-pincode-input/pin-code.gif?raw=true
[ionic2-autocomplete]: /images/20220518/cf95aefaa4a8404d8309ae00e9ea4344.png
[ionic2-autocomplete 1]: https://github.com/kadoshms/ionic2-autocomplete/raw/master/example.gif
[ionic2-alpha-scroll]: https://link.jianshu.com/?t=https://github.com/rossmartin/ionic2-alpha-scroll
[ionic2-indexed-scroll]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ionic2-indexed-scroll
[ionic3-index-list]: https://link.jianshu.com/?t=https://github.com/CK110/ionic3-index-list
[ionic2-indexed-scroll 1]: https://github.com/HsuanXyz/hsuanxyz.github.io/raw/master/assets/ionic2-indexed-scroll/index-scroll.gif?raw=true
[ionic2-transparent-bar]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ionic2-transparent-bar
[Ionic3-MultiLevelSideMenu]: https://link.jianshu.com/?t=https://github.com/sebaferreras/Ionic3-MultiLevelSideMenu
[Ionic2-FullscreenContent]: https://link.jianshu.com/?t=https://github.com/sebaferreras/Ionic2-FullscreenContent
[ionic-shrinkage]: https://link.jianshu.com/?t=https://github.com/patrickmcd/ionic-shrinkage
[ionic2-fixedscroll-directive]: https://link.jianshu.com/?t=https://github.com/joao-gsneto/ionic2-fixedscroll-directive
[ionic2-fixedscroll-directive 1]: https://camo.githubusercontent.com/70855106acbbd56d51a28b0f0dc3a75c14714852/68747470733a2f2f6a6f616f2d67736e65746f2e6769746875622e696f2f696f6e6963322d66697865647363726f6c6c2d6469726563746976652f66697865647363726f6c6c2e676966
[Ionic2-CircularTabs]: https://link.jianshu.com/?t=https://github.com/SinoThomas/Ionic2-CircularTabs
[tabsBottom2Page.gif]: https://github.com/SinoThomas/Ionic2-CircularTabs/raw/master/resources/screenshots/gifs/tabsBottom2Page.gif
[ionic2-circle-text-avatar]: /images/20220518/95cdb797815a4b2c9fad77156624966b.png
[text-avatar]: https://link.jianshu.com/?t=https://github.com/mumairofficial/text-avatar
[ionic2-circle-text-avatar 1]: https://github.com/dheran/ionic2-circle-text-avatar/raw/master/screenshot.PNG?raw=true
[ionic-tags-input]: https://link.jianshu.com/?t=https://github.com/HsuanXyz/ionic-tags-input
[tag]: https://github.com/HsuanXyz/hsuanxyz.github.io/raw/master/assets/ionic-tags-input/tags.png?raw=true