ionic自定义component

例如要自定义一个component:
用于显示一个有固定结构的item组成list
假设这是我们要的一个item的效果:

H1Header

item1
item2
item3

1.在终端中执行:ionic g component MyComponent
执行后src目录中会出现components目录,其中有我们刚刚建立的my-component目录,打开后有scss、ts、html和module.ts文件如图(图中这个组件的名字叫ChapterList)
src:

my-component.html:

my-component.ts:

时间: 2024-07-30 12:42:55

ionic自定义component的相关文章

IONIC自定义subheader的最佳解决方案_javascript技巧

IONIC subheader是我们常用的一个css 属性,但是这个subheader的高度是固定的,当然也是可以改变的,但是如果改了subheader的告诉,还要更改content的top值,稍微有些麻烦,如果是动态告诉的subheader就麻烦了,还需要动态更改content的top数值,所以就写了一个directive解决这个问题: 上代码吧: 主要代码 /** * Created by Richard on 9/21/16. */ 'use strict'; // @ngInject m

Angular2组件库 - Modal组件实现详解(一)

       这篇文章其实写的有点晚了.去年6月份,Angular2的版本刚升级到rc-4,一切都还处于蛮荒时期(虽然现在依然不是太稳定...).当时为我们的组件库开发Modal组件,因为严格遵守ant design的规范来开发,所以Modal包含了Directive和Service两种模式        Directive模式非常符合Angular2的设计思想,所以开发过程也是顺风顺水.使用的方法也非常的常规. import { Component } from '@angular/core'

Ionic2创建App启动页左右滑动欢迎界面_Android

摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy! 效果如下 本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片: 滑动到最后一页才出现启动按钮: 欢迎界面只在第一次安装启动时出现. 下面就让我们一步一步实现这个功能: 1.创建应用: 使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下: ionic start ionic2-welcome

Ionic2创建App启动页左右滑动欢迎界面

摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy! 效果如下 本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片: 滑动到最后一页才出现启动按钮: 欢迎界面只在第一次安装启动时出现. 下面就让我们一步一步实现这个功能: 1.创建应用: 使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下: ionic start ionic2-welcome

LWUIT自定义灵活Style的Component

当你使用LWUIT的这些Component时,如果一个页面中的布局比较复杂,组件 很多,而且页面比较多时,常用的组件诸如 Label,Button,TextField,TextArea 等会用的非常平凡.用起这些组件时,我们常常会设置它的Style,Style很像 web里的css,它能够让我们自定义 Border,Font,FgColor,BgColor,Margin,Padding,设置一个组件的 Style的代码 很简单: 代码 this.getStyle().setBorder(Bord

Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单

本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes.WeiChat微信开发框架时,发现之前做的自定义菜单这块太不给力了,而各种第三方平台在这一块做得也比较渣,功能不全不说,界面还很不友好,于是决心重整一版,以满足需求. 下面先上图,新的UI界面如下所示:   如何实现这个功能呢?下面请等我一一道来吧. 左侧树形结构绑定 HTML模板如下所示: <div class="dd" id="nestab

Spring MVC 中自定义视图 @Component 及 配置 多个视图解析器 Excel视图

首先我们建立一个自己的View实现View接口.要注意在类上面加上@Component的注解,因为看BeanNameViewResolver的源码知道,是直接从ioc容器里面拿的根据名字拿的视图,所以我们得把我们自己写的视图放到容器里面. HelloView.java package com.hust.springmvc.views; import java.util.Date; import java.util.Map; import javax.servlet.http.HttpServle

Component自定义组件集合在设计器里复制,组件集合内容复制

问题描述 publicclassComponentTest:Component{List<ComponentTest>components;///<summary>///组件集合///</summary>[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]publicList<ComponentTest>Components{get{if(components==

第十九章-Delphi自定义部件开发(一)(1)

Delphi除了支持使用可视化部件所见即所得地建立应用程序外,还支持为开发应用而设计自己的部件. 在本章中将阐述如何为Delphi应用程序编写部件.这一章将达到两个目的: ● 教你如何自定义部件 ● 使你的部件成为Delphi环境的有机组合部分 19.1 Delphi部件原理 19.1.1 什么是部件 部件是Delphi应用程序的程序构件.尽管大多数部件代表用户界面的可见元素,但部件也可以是程序中的不可见元素,如数据库部件.为弄清什么是部件可以从三个方面来考察它:功能定义.技术定义和经验定义.