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 加载
网友评论