[Ionic] 预设组件(一)

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 APIItem 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 加载

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容