Mip-sidebar Sidebar Components How to use the Mip-sidebar Sidebar component

Title	Content
Type	General
Support layout	N/s
The required script	Https://mipcache.bdstatic.com/static/v1/mip-sidebar/mip-sidebar.js

Sample

Basic Use

<div id= "Hamburger" class= "Mip-button" on= "Tap:sidebar.open" > <div id= "logo" href= "/" >open mip-sidebar</div> </div> <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= ">" NAV Item 2-<mip-fit-text> </mip-fit-text> </li> <li> <mip-fit-text width= "220" Height= "20" layout= "Responsive" Max-font-size= ">" 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>

Right side Sidebar

<div id= "Hamburger" class= "Mip-button" on= "Tap:right-sidebar.open" > <div id= "logo" href= "/" >open mip-sidebar</div> </div> <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= ">" NAV Item 2-<mip-fit-text> </mip-fit-text> </li> <li> <mip-fit-text width= "220" Height= "20" layout= "Responsive" Max-font-size= ">" 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>

Property

ID

Description: ID

Required: Yes

Format: string

Unit: None

Default value: No Use restrictions: none

Layout

Description: Layout setting

Required: Yes

Format: string

Unit: None

Take value: Nodisplay

side

Description: Side bar position setting, left or right

Required: No

Format: string

Unit: None

Take value: Left, right

Default value: Left