Manuel de documentation MIP
/ mip-sidebar 側(cè)邊欄
mip-sidebar 側(cè)邊欄
mip-sidebar 側(cè)邊欄組件。
示例
基本使用
<header> <div id="hamburger" class="mip-button" on="tap:sidebar.open"> <div id="logo" href="/">Open mip-sidebar</div> </div> </header> <mip-sidebar id='sidebar' layout="nodisplay" class="mip-hidden"> <ul> <li> <mip-link href="#">Home</mip-link> <button class="mip-button" on="tap:sidebar.close"> X </button> </li> <li> Nav item 1</li> <li> <mip-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 2 - <mip-fit-text> </mip-fit-text> </li> <li> <mip-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 3 - <mip-fit-text> longer text </mip-fit-text> </li> <li> Nav item 4 - Image <mip-img class='mip-sidebar-image' src="http://placeholder.qiniudn.com/100x50" width="20" height="20" alt="an image"></mip-img> </li> <li> Nav item 5</li> <li> Nav item 6</li> </ul> </mip-sidebar>
右側(cè)側(cè)邊欄
<header> <div id="hamburger" class="mip-button" on="tap:right-sidebar.open"> <div id="logo" href="/">Open mip-sidebar</div> </div> </header> <mip-sidebar id='right-sidebar' layout="nodisplay" side="right" class="mip-hidden"> <ul> <li> <mip-link href="#">Home</mip-link> <button class="mip-button" on="tap:right-sidebar.close"> X </button> </li> <li> Nav item 1</li> <li> <mip-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 2 - <mip-fit-text> </mip-fit-text> </li> <li> <mip-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 3 - <mip-fit-text> longer text </mip-fit-text> </li> <li> Nav item 4 - Image <mip-img class='mip-sidebar-image' src="http://placeholder.qiniudn.com/100x50" width="20" height="20" alt="an image"></mip-img> </li> <li> Nav item 5</li> <li> Nav item 6</li> </mip-sidebar>
屬性
id
說明:id
必填:是
格式:字符串
單位:無(wú)
默認(rèn)值:無(wú)
使用限制:無(wú)
layout
說明:布局設(shè)定
必填:是
格式:字符串
單位:無(wú)
取值:nodisplay
side
說明:側(cè)邊欄位置設(shè)定,左邊或者右邊
必填:否
格式:字符串
單位:無(wú)
取值:left, right
默認(rèn)值:left