mip-sidebar

说明

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

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

示例

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<header> <div id="logo" on="tap:sidebar.open">Open mip-sidebar</div> </header> <mip-sidebar id="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>

右侧侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header> <div id="logo" on="tap:right-sidebar.open">Open mip-sidebar</div> </header> <mip-sidebar id="right-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

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