MIP 組件布局

2018-11-07 17:29 更新

MIP 組件支持的各種布局，可以讓圖片屏幕自適應(yīng)、定高等。讓我們看看下面的詳細(xì)說明。

支持的布局種類

類別強(qiáng)制 width強(qiáng)制 height詳細(xì)說明
responsive是是能夠根據(jù)width、height的值，算出元素對(duì)應(yīng)的比例，在不同屏幕寬度上做自適應(yīng)，非常適合圖片、視頻等需要大小自適應(yīng)的組件
fixed-height否是元素的高度固定,width缺省或者取值為auto，比較適合 mip-carousel
fill否否元素的大小根據(jù)父節(jié)點(diǎn)的大小自動(dòng)撐開
container否否元素的大小由他們的子節(jié)點(diǎn)大小決定,類似 html 的 div
nodisplay否否元素不展現(xiàn)，即 display 為 none；這種元素可應(yīng)用于：他自身展現(xiàn)依賴用戶的點(diǎn)擊等行為的觸發(fā)
fixed是是元素根據(jù) width 和 height 固定高寬，不隨 media 變化

使用

MIP 元素添加屬性 layout，取值參照上面的種類

<mip-img 
    layout="responsive" 
    width="350" 
    height="263" 
    popup="" 
    alt="baidu mip img" 
    src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
</mip-img>

layout 屬性缺省規(guī)則

widthheight其他屬性默認(rèn)布局
有有無fixed
有有存在sizes 參數(shù)responsive
無或取值為 auto有無fixed-height
無無無container
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)