mip-sidebar
优质
小牛编辑
128浏览
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
说明:切换侧边栏的开关状态