![]() ![]() offcanvas-end hides the offcanvas on the right offcanvas-start hides the offcanvas on the left The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting: 3 s $offcanvas-border-color : $modal-content-border-color $offcanvas-border-width : $modal-content-border-width $offcanvas-title-line-height : $modal-title-line-height $offcanvas-bg-color : $modal-content-bg $offcanvas-color : $modal-content-color $offcanvas-box-shadow : $modal-content-box-shadow-xs Usage ![]() $offcanvas-padding-y : $modal-inner-padding $offcanvas-padding-x : $modal-inner-padding $offcanvas-horizontal-width : 400 px $offcanvas-vertical-height : 30 vh $offcanvas-transition-duration. Note that you don’t need to add role="dialog" since we already add it via JavaScript. Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="."-referencing the offcanvas title-to. Backdroped with scrolling Try scrolling the rest of the page to see this option in action. Try the top, right, and bottom examples out below.Įnable body scrolling Enable backdrop (default) Enable both scrolling & backdrop Colored with scrolling Try scrolling the rest of the page to see this option in action. offcanvas-bottom places offcanvas on the bottom of the viewport offcanvas-top places offcanvas on the top of the viewport offcanvas-end places offcanvas on the right of the viewport offcanvas-start places offcanvas on the left of the viewport (shown above) There’s no default placement for offcanvas components, so you must add one of the modifier classes below Action Another action Something else here Placement In real life you can have the elements you have chosen. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |