国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

MIP-Dokumentationshandbuch / mip-sidebar 側(cè)邊欄

mip-sidebar 側(cè)邊欄

mip-sidebar 側(cè)邊欄組件。

QQ截圖20170204131920.png

示例

基本使用

<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
必填:是
格式:字符串
單位:無
默認(rèn)值:無 使用限制:無

layout

說明:布局設(shè)定
必填:是
格式:字符串
單位:無
取值:nodisplay

side

說明:側(cè)邊欄位置設(shè)定,左邊或者右邊
必填:否
格式:字符串
單位:無
取值:left, right
默認(rèn)值:left