mip-sidebar 侧边栏

侧边栏组件，点击按钮，侧边栏滑入屏幕。

标题 内容
类型 通用
支持布局 N/S
所需脚本 https://c.mipcdn.com/static/v1/mip-sidebar/mip-sidebar.js

示例

基本使用

  1. <header>
  2.     <div id="logo" on="tap:sidebar.open">Open mip-sidebar</div>
  3. </header>
  4. <mip-sidebar 
  5.     id="sidebar"
  6.     layout="nodisplay"
  7.     class="mip-hidden">
  8.     <ul>
  9.         <li>
  10.             <a href="https://www.mipengine.org/">MIP官网</a>
  11.             <button on="tap:sidebar.close"> X </button>
  12.         </li>
  13.         <li>Nav item 1</li>
  14.         <li>Nav item 2</li>
  15.         <li>Nav item 3</li>
  16.         <li>
  17.             Nav item 4 - Image
  18.             <mip-img
  19.                 src="https://www.mipengine.org/favicon.ico"
  20.                 width="32"
  21.                 height="32"
  22.                 alt="mipengine ico"></mip-img>
  23.         </li>
  24.         <li>Nav item 5</li>
  25.         <li>Nav item 6</li>
  26.     </ul>
  27. </mip-sidebar>

右侧侧边栏

  1. <header>
  2.     <div id="logo" on="tap:right-sidebar.open">Open mip-sidebar</div>
  3. </header>
  4. <mip-sidebar 
  5.     id="right-sidebar"
  6.     layout="nodisplay"
  7.     side="right"
  8.     class="mip-hidden">
  9.     <ul>
  10.         <li>
  11.             <a href="https://www.mipengine.org/">MIP官网</a>
  12.             <button on="tap:right-sidebar.close"> X </button>
  13.         </li>
  14.         <li>Nav item 1</li>
  15.         <li>Nav item 2</li>
  16.         <li>Nav item 3</li>
  17.         <li>
  18.             Nav item 4 - Image
  19.             <mip-img
  20.                 src="https://www.mipengine.org/favicon.ico"
  21.                 width="32"
  22.                 height="32"
  23.                 alt="mipengine ico"></mip-img>
  24.         </li>
  25.         <li>Nav item 5</li>
  26.         <li>Nav item 6</li>
  27.         <li>placeholder</li>
  28.         <li>placeholder</li>
  29.         <li>placeholder</li>
  30.         <li>placeholder</li>
  31.         <li>placeholder</li>
  32.         <li>placeholder</li>
  33.         <li>placeholder</li>
  34.         <li>placeholder</li>
  35.         <li>placeholder</li>
  36.         <li>placeholder</li>
  37.         <li>placeholder</li>
  38.         <li>placeholder</li>
  39.         <li>placeholder</li>
  40.         <li>placeholder</li>
  41.     </ul>
  42. </mip-sidebar>

属性

id

说明：id
必填：是
格式：字符串
单位：无
默认值：无
使用限制：无

layout

说明：布局设定
必填：是
格式：字符串
单位：无
取值：nodisplay

side

说明：侧边栏位置设定，左边或者右边
必填：否
格式：字符串
单位：无
取值：left, right
默认值：left