1 line
5.7 KiB
JavaScript
1 line
5.7 KiB
JavaScript
const demoDrawer='\n<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">\n Link with href\n</a>\n\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">\n Button with data-bs-target\n</button>\n\n<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">\n <div class="offcanvas-header">\n <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n\n <div class="offcanvas-body">\n <div>\n Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.\n </div>\n\n <div class="dropdown mt-16">\n <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">\n Dropdown button\n </button>\n\n <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n <li>\n <a class="dropdown-item" href="#">Action</a>\n </li>\n <li>\n <a class="dropdown-item" href="#">Another action</a>\n </li>\n <li>\n <a class="dropdown-item" href="#">Something else here</a>\n </li>\n </ul>\n </div>\n </div>\n</div>\n\n',placement='\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>\n\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>\n\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>\n\n<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">\n <div class="offcanvas-header">\n <h5 id="offcanvasTopLabel">Offcanvas top</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n\n <div class="offcanvas-body">\n ...\n </div>\n</div>\n\n<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">\n <div class="offcanvas-header">\n <h5 id="offcanvasRightLabel">Offcanvas right</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n\n <div class="offcanvas-body">\n ...\n </div>\n</div>\n\n<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">\n <div class="offcanvas-header">\n <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n\n <div class="offcanvas-body small">\n ...\n </div>\n</div>\n\n',backdrop='\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>\n<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>\n\n<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">\n <div class="offcanvas-header">\n <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n <div class="offcanvas-body">\n <p>Try scrolling the rest of the page to see this option in action.</p>\n </div>\n</div>\n\n<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">\n <div class="offcanvas-header">\n <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n <div class="offcanvas-body">\n <p>.....</p>\n </div>\n</div>\n\n<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">\n <div class="offcanvas-header">\n <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>\n <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>\n </div>\n <div class="offcanvas-body">\n <p>Try scrolling the rest of the page to see this option in action.</p>\n </div>\n</div>\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))})); |