组件介绍

Posted 2023-02-15

参考技术A 组件介绍

1、打开ionic官网 https://ionicframework.com/

2、点开components，里面会出现原有的组件（以后项目开发过程中还会自定义组件）

3、介绍部分组件（Grid、Modals、Badges、FABs、Segment）

--grid：栅栏布局

--modals：弹窗

--badges：卡片

--FABs：比较新颖的快速导航

--segment：选项卡（导航）

下面是简单介绍几个组件，在最后我会详细讲解一个组件的使用

Grid

网格系统由12列组成，每个ion-col都可以通过设置col-width属性来确定大小。

基本用法：

This column will take 12 columns

This column will take 6 columns

Modals

模式在关闭屏幕上滑动以显示临时UI，通常用于登录或注册页面，消息组合和选项选择。

注：一般做成弹窗。

基本用法：

import ModalController from 'ionic-angular';

import ModalPage from './modal-page';

export class MyPage

constructor(public modalCtrl: ModalController)



presentModal()

let modal = this.modalCtrl.create(ModalPage);

modal.present();





Badges

Badges是通常向用户传达数值的小组件。它们通常用在一个项目中。

基本用法：

Followers

260k

也可以给出任何颜色属性：

FABs

FAB（浮动动作按钮）是标准材料设计组件。它们被塑造成一个代表一个促进行动的圆圈。按下时，可能会包含更多的相关动作。FABs的名字表示在固定位置上浮动内容。

基本用法：

Ionic Component Documentation  

Segment

Segment是一组按钮显示的行。它们可以作为过滤器，根据段值显示/隐藏元素。

注：类似导航。

基本用法：

Ionic Component Documentation  

详细讲解Segment

1、打开ionic官网：https://ionicframework.com/

2、点开Explore the docs，进到文档

3、点开components,里面找到Segment组件，点击Demo Source进到github上的源码

4、点开pages.ts，将缺少的可以自己拷贝到自己的某个页面ts中。

（1）首先这里import指的是导入ionic库中的某个类库，如果同属于一个ionic库这个时候可以放在一起，格式比如：import NavController,AlertController,Platform,ModalController  from 'ionic-angular';

（2）然后是在class中先声明，比如这里的

pet: string = "puppies";

isandroid: boolean = false;

constructor小括号中放的是将类库初始化，自己命名，花括号中进行函数等的调用。

5、最后在template.html中自己缺失的部分拷贝到自己的html中。

Puppies

Kittens

Ducklings

1、这里[(ngModel)]="pet"指的是ts页面中初始化的值，也就是刚进入到页面的是哪个选项；

2、 ion-segment-button value="puppies"，这里的value值对应下面的页面，因为每个选项都是对应不同的页面的，这里通过value值来绑定。

...

...

...

...

...

...

这里[ngSwitch]="pet"对应的是上面的导航的初始化页面；

ion-list*ngSwitchCase="'ducklings'" 中的*ngSwitchCase分别对应导航每个导航的value值.

问题：

1、ionic3对于资源的管理必须放在assets文件夹中，其他地方不能识别；

2、在ts文件中写函数，需要调用库中的类库时，在constructor初始化时必须加上类型（public、private等）