您的位置:首页 > Web前端 > CSS

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。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: