ionic移动开发常用的HTML组件总结

ionic常用的11个组件

header组件list组件卡片组件复选框组件单选框组件下拉选择组件按钮组件chip组件图形组件输入组件栅格化组件

1、header组件

演示代码

ionic组件header部分

浏览

运行效果

2、list组件

演示代码

元素1

元素1

元素2

元素2

元素3

元素3

元素4

元素4

元素5

元素5

元素6

元素6

运行效果

3、卡片组件

演示代码

主标题

副标题

Keep close to Nature's heart... and break clear away, once in awhile,

and climb a mountain or spend a week in the woods. Wash your spirit clean.

运行效果

4、复选框组件

演示代码

选项1

选项2

选项3

选项4

选项5

选项6

运行效果

5、单选框组件

演示代码

你中午想吃什么

米线

面条

炒饭

盖饭

运行效果

6、下拉选择组件

演示代码(去掉multiple="true"属性变为单选框)

Gender

Female

Male

运行效果

7、按钮组件

演示代码

按钮组件1

按钮组件

按钮组件2

按钮组件

按钮组件3

按钮组件

运行效果

8、chip组件

演示代码

用户名

Default

Secondary Label

Secondary w/ Dark label

Default

Default

Button Chip

Icon Chip

Avatar Chip

运行效果

9、图形组件

演示代码

运行效果

10、输入组件

演示代码

用户名

留言内容

出生日期

运行效果

11、栅格化组件

演示代码

姓名

微笑涛声

身高

保密

体重

保密

运行效果