ionic css类总结
2016-05-04 11:23
337 查看
header,subheader,footer主要用bar,有ion-header-bar,ion-footer-bar,有align-title等API;
content有ion-content,ion-refresher,ion-pane,赋予了多种API;
Buttons的类比较多,分Block,Full Width,Different Sizes,Outlined,Clear,Icons,Headers/Footers,Clear Buttons in Headers,Button Bar;
List与item联用,有Divider,icons,buttons,avatars,thumbnails,inset lists等类;
Cards也是和item联用,用divider来区分头尾部,当然经常list card一起用来做一个有list的card,用item-avatar这个可以插入头像, item-image插入图片,item-icon插入图标等;
Forms主要在label标签上加item-input引入,span上加input-label,通过item-stacked/floating-label可以设置输入框和文字的对齐方式,通过list-inset可以将表单内嵌,通过item-input-inset可以将输入框内嵌,在input标签之前加带icon的i标签可以给输入框之前加图标;
toggle可以用来做类型八卦图的选框,基本格式是label(toggle)里面内嵌一个input(type=“checkbox”)和div(track),div里面内嵌一个div(handle);
checkbox使用它要在包裹层声明item-checkbox,在label上声明class="checkbox",input上声明type="checkbox",input包在label里;
radio-buttons在label上声明item-radio,input上声明type=“radio”,name=“group”;
range主要用来做进度条音量条等,配合item,icon使用。包裹层声明是range,里面放图标,input(type=“range”),再图标;
select用item-select来声明,label里面声明item item-input item-select,label包裹div(class="input-label")、select两个标签;
tabs首先在包裹层声明class为tabs,有tabs-icon-only,tabs-icon-top,tabs-icon-left,tabs-striped,tabs-top等,子层用tabs-item声明;
grid网格系统,和bootstrap差不多的,row-top,row-center,row-button,用.respinsive-sm,responstive-md,responstive-lg用在响应式布局上;
utility多个地方都可以用的,有colors,icons,padding,对于color和background,在类名后缀加上light,positive,stable等相应颜色标签,padding有.padding,
.padding-vertical,.padding-horizontal,.padding-top,.padding-right,.padding-bottom,.padding-left。
content有ion-content,ion-refresher,ion-pane,赋予了多种API;
Buttons的类比较多,分Block,Full Width,Different Sizes,Outlined,Clear,Icons,Headers/Footers,Clear Buttons in Headers,Button Bar;
List与item联用,有Divider,icons,buttons,avatars,thumbnails,inset lists等类;
Cards也是和item联用,用divider来区分头尾部,当然经常list card一起用来做一个有list的card,用item-avatar这个可以插入头像, item-image插入图片,item-icon插入图标等;
Forms主要在label标签上加item-input引入,span上加input-label,通过item-stacked/floating-label可以设置输入框和文字的对齐方式,通过list-inset可以将表单内嵌,通过item-input-inset可以将输入框内嵌,在input标签之前加带icon的i标签可以给输入框之前加图标;
toggle可以用来做类型八卦图的选框,基本格式是label(toggle)里面内嵌一个input(type=“checkbox”)和div(track),div里面内嵌一个div(handle);
checkbox使用它要在包裹层声明item-checkbox,在label上声明class="checkbox",input上声明type="checkbox",input包在label里;
radio-buttons在label上声明item-radio,input上声明type=“radio”,name=“group”;
range主要用来做进度条音量条等,配合item,icon使用。包裹层声明是range,里面放图标,input(type=“range”),再图标;
select用item-select来声明,label里面声明item item-input item-select,label包裹div(class="input-label")、select两个标签;
tabs首先在包裹层声明class为tabs,有tabs-icon-only,tabs-icon-top,tabs-icon-left,tabs-striped,tabs-top等,子层用tabs-item声明;
grid网格系统,和bootstrap差不多的,row-top,row-center,row-button,用.respinsive-sm,responstive-md,responstive-lg用在响应式布局上;
utility多个地方都可以用的,有colors,icons,padding,对于color和background,在类名后缀加上light,positive,stable等相应颜色标签,padding有.padding,
.padding-vertical,.padding-horizontal,.padding-top,.padding-right,.padding-bottom,.padding-left。