const demoDrawer='\n\n Link with href\n\n\n\n\n
\n
\n
Offcanvas
\n \n
\n\n
\n
\n Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.\n
\n\n
\n \n\n \n
\n
\n
\n\n',placement='\n\n\n\n\n\n\n
\n
\n
Offcanvas top
\n \n
\n\n
\n ...\n
\n
\n\n
\n
\n
Offcanvas right
\n \n
\n\n
\n ...\n
\n
\n\n
\n
\n
Offcanvas bottom
\n \n
\n\n
\n ...\n
\n
\n\n',backdrop='\n\n\n\n\n
\n
\n
Colored with scrolling
\n \n
\n
\n

Try scrolling the rest of the page to see this option in action.

\n
\n
\n\n
\n
\n
Offcanvas with backdrop
\n \n
\n
\n

.....

\n
\n
\n\n
\n
\n
Backdroped with scrolling
\n \n
\n
\n

Try scrolling the rest of the page to see this option in action.

\n
\n
\n\n';$("pre code").each((function(){"drawer"===$(this).data("component")&&($(this).text($.trim($(this).data("code"))),"demo"===$(this).data("code")&&$(this).text(demoDrawer),"placement"===$(this).data("code")&&$(this).text(placement),"backdrop"===$(this).data("code")&&$(this).text(backdrop))}));