Components 组件
IonicApp由称为组件的高级模块组成,通过使用组件,可以快速构建程序界面。
Ionic预设了许多组件,包括模块,弹出窗口和卡片。
Action Sheets
Action Sheet 是从屏幕的底部向上弹出选项框,可以设置确认/取消操作。
Action Sheet 有时可以作为菜单的替代,但是不应该用于导航。
Action Sheet 总是出现在页面的最上端并覆盖底层内容焦点。当被触发时,页面的其余部分会变暗,以给予 Action Sheet 选项更多的焦点。
注:相当于普通的底部弹出框
Alerts
Alert 是提供选择特定动作或动作列表的弹出框,可以向用户提供重要信息,或要求用户作出决定(或多项决定)。
Alert 一般只用于快速操作,如密码验证,小应用程序通知或快速选项。更深入的界面交互,应该使用全屏的 Modals。
Alert 非常灵活,并且可以轻松定制。
注:相当于弹出框Dialog
Badges
Badge 标记,一般用户将数值传递给用户的小部件。
注:相当于带圆角和底色的文本标签
Buttons
Button 是与应用程序进行交互和导航的基本方式,并且应该清楚地告知用户点击后会发生什么操作。
Button 可以由文本 / 图标组成,并且可以用各种属性进行增强。
注:即是Button,自带了多种样式。
在写css之前应该看看自带样式有没有提供对应的样式。
Cards
Card 是一种展示内容的方案,能为用户提供良好的视觉焦点。是一种在有限的屏幕空间内更好展示内容的优质方案,已成为许多公司 (包括Google,Twitter,Spotify等) 的首选设计模式。
Card 可以轻松地在多种不同的屏幕尺寸下直观地显示相同的信息。
Card 提供了更多的灵活的控制方式,并可以使用动画。
Card 通常被放置在另一个 Card 之上,但它们也可以像“页面(Page)”一样使用,并能左右滑动。
注:即是CardView,一种带有立体卡片效果的容器
Checkbox
Checkbox,选择框,是一个保存布尔值的输入组件。
注:选择框CheckBox,不多解析
DateTime
DateTime 用于显示一个界面,使用户可以轻松选择日期和时间。
DateTime 与<input type="datetime-local">元素类似,但是,Ionic的DateTime 可以轻松地以首选格式显示日期和时间,并管理日期时间值。
注:日期选择底部弹出框,WheelView样式 (即类似IOS的时间选择框)
FABs
FAB 浮动按钮,标准的MD组件。顾名思义,浮动按钮就是以固定的位置浮在内容上的按钮。
注:即MD标志性的FloatingActionButton,自带多种子列表的展开方式,可以说是碉堡了
Gestures
Gestures 手势事件,可以在HTML通过tap,press,pan,swipe,rotate,pinch访问。
注:即通过 <? (tap/press/...)="func($event)"> 为控件添加相关事件的触发回调
Grid
Grid 网格,Ionic的网格系统基于 Flexbox,这是Ionic支持的设备都支持的CSS功能。
Grid 由三个单元组成:Grid,Rows,Columns。
Grid 默认为12列。
Icons
Icon 图标,带有与我们都认识并喜爱的700+ Ionicons图标。
通过 <ion-icon name="icon_name"> 使用 Icon。
通过 <ion-icon isActive="true/false">设置活动状态图标区分。
通过 <ion-icon ios="logo-apple" md="logo-android">设置风格图标区分。
注:自带的图标库,提供700+个的图标,并且大部分有风格化选择
Inputs
Input 输入框,输入对于以安全的方式收集和处理用户输入非常重要。
他们应该遵循每个平台的样式和交互准则,以便他们直观地与用户交互。
Ionic使用Angular 2的表单库,它可以被认为是两个相关的部分,控件和控件组。
表单中的每个输入字段都有一个Control,一个绑定到字段中的值的函数,并执行验证。一个控制组是控件的集合。控件组处理表单提交,并提供可用于确定整个表单是否有效的高级API。
注:输入框,相当于EditText,本质是对Input的封装,提供了多种样式
数据验证部分请参考Angular的 表单输入
Lists
List 列表,用于显示信息行,如联系人列表,播放列表或菜单等。
更多信息,请查看 List API 和 Item API。
注:ListView 列表,基本上绝大部分的需求都能通过预设的List实现,包括多级列表,列表头,测滑等功能,值得拥有
Loading
Loading 加载框,是一个覆盖层,可以在指示活动时阻止用户交互。
默认情况下会根据设置的样式显示一个 Spinner 。
动态的内容,可以与 Spinner 一起传递和显示。
Spinner 可以隐藏或定制为其他多种预定义的样式。
Loading 显示在其他内容的顶部,即使在导航过程中。
注:Loading对话框,通过LoadingController创建,十分方便
Menus
Menu 菜单,是可以拖出或切换显示的侧面菜单导航控件。
当 Menu 关闭时,Menu 的内容将被隐藏。
Menu 基于平台适应适当的风格。
注:侧滑菜单,能定制平台风格化
Modals
Modal,在屏幕外滑动以显示临时UI,通常用于登录或注册页面,消息组成和选项选择等。
Modal 通过覆盖用户当前页面的内容,实现 Page 的加载。
当 Modal(或任何其他覆盖如 Alert 或 Action Sheet)被“呈现”到导航控制器时,覆盖层将被添加到应用程序的根导航栏中。在 Modal 被呈现之后,从组件实例中通过使用ViewController的dismiss方法可关闭或“解散”。
注:模拟页面跳转,实际上是把需要加载的 Page 直接插入到当前的页面中,在小屏幕上显示类似页面跳转,但在大屏幕会使用类似Dialog的效果加载 Page,建议跳转还是用Nav进行,但是一些登录注册,说明文档等,可以使用 Modal 加载