ionic css类总结

约定不等于承诺〃 2022-08-21 13:50 75阅读 0赞

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。