mip-sidebar

优质

小牛编辑

127浏览

2023-12-01

说明

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

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

示例

基本使用

<header>
  <div on="tap:sidebar.open">Open mip-sidebar</div>
</header>
<mip-sidebar
 
  layout="nodisplay"
  class="mip-hidden">
  <ul>
    <li>
      <a href="https://www.mipengine.org/">MIP官网</a>
      <button on="tap:sidebar.close"> X </button>
    </li>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>
      Nav item 4 - Image
      <mip-img
        src="https://www.mipengine.org/favicon.ico"
        width="32"
        height="32"
        alt="mipengine ico"></mip-img>
    </li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</mip-sidebar>

查看例子编辑示例

右侧侧边栏

<header>
  <div on="tap:right-sidebar.open">Open mip-sidebar</div>
</header>
<mip-sidebar 
 
  layout="nodisplay"
  side="right"
  class="mip-hidden">
  <ul>
    <li>
      <a href="https://www.mipengine.org/">MIP官网</a>
      <button on="tap:right-sidebar.close"> X </button>
    </li>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>
      Nav item 4 - Image
      <mip-img
        src="https://www.mipengine.org/favicon.ico"
        width="32"
        height="32"
        alt="mipengine ico">
      </mip-img>
    </li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
    <li>placeholder</li>
  </ul>
</mip-sidebar>

查看例子编辑示例

属性

layout

说明：布局设定

必填：是

格式：string

取值：nodisplay

side

说明：侧边栏位置设定，左边或者右边

必填：否

格式：string

取值：left, right

默认值：left

open

说明：表明侧边栏是否打开

必填：否

格式：boolean

方法

open

说明：打开侧边栏

close

说明：关闭侧边栏

toggle

说明：切换侧边栏的开关状态