组件介绍

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了组件介绍相关的知识,希望对你有一定的参考价值。

参考技术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等)

以上是关于组件介绍的主要内容,如果未能解决你的问题,请参考以下文章

01-Kubernetes 组件介绍

Vue 3新引入的Suspense组件介绍

1.Flink介绍发展历史官方介绍组件栈应用场景

React的函数组件以及类组件介绍

React的函数组件以及类组件介绍

ExtJS 4.2 组件介绍