`
rensanning
  • 浏览: 3548864 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38155
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607318
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682347
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89358
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:401860
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69699
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91724
社区版块
存档分类
最新评论

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

 
阅读更多
(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/
  • 大小: 2.6 KB
  • 大小: 4.3 KB
  • 大小: 23.7 KB
  • 大小: 1.7 KB
  • 大小: 182.6 KB
  • 大小: 72.7 KB
  • 大小: 122.9 KB
  • 大小: 13.4 KB
  • 大小: 3.9 KB
  • 大小: 2.4 KB
  • 大小: 489.4 KB
  • 大小: 2 KB
  • 大小: 2.3 KB
  • 大小: 3.4 KB
  • 大小: 24.2 KB
  • 大小: 9.3 KB
  • 大小: 197.5 KB
  • 大小: 10.3 KB
  • 大小: 3.9 KB
  • 大小: 3.6 KB
  • 大小: 46.2 KB
  • 大小: 158 KB
  • 大小: 8.3 KB
  • 大小: 1.8 KB
  • 大小: 656.4 KB
  • 大小: 3.9 KB
  • 大小: 3 KB
  • 大小: 1 KB
  • 大小: 28.6 KB
  • 大小: 18.1 KB
  • 大小: 64.8 KB
  • 大小: 295.8 KB
2
0
分享到:
评论

相关推荐

    为React打造的一套ionic风格的可复用UI组件库

    标题中的“为React打造的一套ionic风格的可复用UI组件库”表明这是一个专为React框架设计的用户界面(UI)组件集合,其设计灵感来源于Ionic框架,这意味着它可能具有移动优先、响应式的设计,适合构建跨平台的移动...

    ionic3组件通信多重应用

    - `components`:存放可重用的UI组件,这些组件可能在多个页面中被引用。 - `app.module.ts`:应用的主模块,负责注册组件、服务和指令。 - `app.component.ts`和`app.component.html`:应用的根组件,通常用于导航...

    ionic 聊天ui

    首先,Ionic提供了一套完整的UI组件库,如卡片(Cards)、侧滑菜单(Slideout)、导航栏(Navbar)等,这些都可以被用来构建聊天应用的各个页面。在单聊和群聊功能中,通常会用到消息列表、输入框、发送按钮等组件,...

    ionic angularjs mobile ui

    【描述】"ionic angularjs mobile ui 自适应" 提示我们,该项目特别关注于应用的响应式设计,确保在不同设备和屏幕尺寸上都能提供良好的用户体验。"是我学习的例子" 表明这是一个教学或实践性质的项目,适合开发者...

    ionic基础组件使用案例

    在本文中,我们将深入探讨Ionic框架的基础组件及其在实际应用中的使用案例。Ionic是一个流行的开源框架,用于构建高性能的移动应用程序,它基于Web技术如HTML、CSS和JavaScript,并且与Angular紧密集成。作为...

    ionic ui 全演示 代码全 亲测有效

    标题"ionic ui 全演示 代码全 亲测有效"表明这是一个完整的`Ionic UI`组件示例集合,其中包含了所有可用的UI元素,并且已经过实际测试,确保了其功能性和可行性。这样的资源对于开发者来说极其宝贵,可以作为快速...

    ionic-4-components::pizza:Ionic 4 UI组件库。 具有图片库,刷新器,底页等

    | | :sparkles: 产品特点Twitter启发的图片库材质设计:拉动刷新灵活的对话框组件功能发现离子选项卡的Material Design应用栏 :package: 安装首先,从npm安装软件包。 最新版本支持Ionic 4和Angular> = 7。安装UI库...

    Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面示例代码.zip

    在本文中,我们将深入探讨如何使用Ionic框架创建页面、实现页面间的跳转,以及...通过理解和掌握页面创建、导航控制、以及UI元素如返回按钮和底部导航的使用,你将能更好地利用Ionic来开发高效且用户友好的应用程序。

    一个可筛选的下拉选择ionic2组件ionic2filterselect

    【标题】"一个可筛选的下拉选择ionic2组件ionic2filterselect" 是一个专为Ionic 2框架设计的自定义组件,它扩展了标准的下拉选择功能,增加了筛选选项,以帮助用户更高效地从长列表中找到所需内容。在移动应用开发中...

    基于Ionic 2.0的NiceFish-ionic移动端组件库设计源码

    该项目是一款基于Ionic 2.0的NiceFish移动端组件库设计源码,采用TypeScript语言开发,集成了HTML、JavaScript和CSS等前端技术。整个项目包含228个文件,其中png图片151个,scss样式表10个,ts TypeScript文件9个,...

    Ionic3 UI组件之autocomplete详解

    在移动应用开发中,用户界面(UI)组件扮演着至关重要的角色,它们提供了与用户交互的界面。在 Ionic3 框架中,虽然官方并没有直接提供 autocomplete 组件,但开发者可以通过第三方库来实现这一功能。本篇文章将深入...

    ionic angular capacitor项目展示控件使用,页面跳转,网络请求封装

    `Ionic`提供了许多内置UI组件,如卡片(Cards)、表单元素(Inputs)、按钮(Buttons)、滑块(Sliders)、下拉列表(Selects)等。这些控件可以方便地通过Angular指令在模板中使用,例如`<ion-button>`、`...

    ionic2 new demo

    2. **页面结构**:`Ionic2`应用由多个页面(Page)组成,每个页面都包含一个组件。在本示例中,你可以看到如何定义和使用自定义页面,例如,创建一个包含下拉框和输入框的新组件。 3. **UI组件**: - **下拉框...

    ionic4官网demo_sidemenu_angular

    4. **离子框架组件(Ionic Framework Components)**:如`<ion-menu>`、`<ion-header>`、`<ion-content>`和`<ion-item>`等,这些是构建 Ionic 应用的基本元素,它们提供了丰富的UI交互和布局功能。 5. **服务...

    Ionic3 UI组件之Gallery Modal详解

    在开发Ionic3应用程序时,UI组件的选取与使用对于提升用户体验至关重要。Gallery Modal是一个非常实用的组件,尤其在处理图片展示和预览场景时。它提供了类似相册的预览功能,用户可以通过手势进行放大、缩小操作,...

    ionic-calendar:Ionic 框架的日历组件

    Ionic 提供了一套 UI 组件和工具,用于构建跨平台的混合移动应用。它结合了 Angular 的强大力量和 Cordova/ Capacitor 的原生功能,使开发者可以使用 Web 技术构建原生应用。`ionic-calendar` 正是这个生态系统中的...

    ionic4-star-rating:ionic-4项目的星级评定组件

    您可以在一个页面或多个页面中多次使用它,并在父组件中获得更改的评级值。 您也可以在<form>组件内部使用它(也支持在<form>内部多次使用)。 易于与您的ionic-4项目集成。 对于ionic-3项目,请检查...

    ionic中文文档1_3

    Ionic 提供了一系列 UI 组件,如按钮、卡片、滑块、表单元素、网格系统等,这些组件设计得既美观又实用,适应多种屏幕尺寸。在文档中,你将学习如何使用这些组件来构建用户界面,并了解它们的属性、事件和样式控制。...

    03 ionic中创建一个页面组件、循环数据、以及页面跳转-avi.rar

    在本课程中,我们将深入探讨如何在Ionic框架中创建页面组件、处理循环数据以及实现页面间的导航。Ionic是一个流行的开源框架,它允许开发者构建高性能的混合移动应用,使用Web技术如HTML、CSS和JavaScript。本教程...

    ion2calendar一个可配置与可选择范围日期的ionic2日历组件

    离子框架(Ionic)是基于Angular构建的一个流行的开源移动应用框架,它提供了许多原生移动应用的UI组件,使得开发者可以用HTML、CSS和JavaScript来构建混合式移动应用。而Ionic 2(现在称为Ionic Angular)是其第二...

Global site tag (gtag.js) - Google Analytics